JavaScript表单数据验证 onclick()

字号+ 作者:alpha 来源:www.seoalphas.com 2017-09-14 08:59 浏览次数(346)

表单提交验证,提交前先通过JavaScript验证下手机号和姓名,此处记录的方法未采用ajax进行数据提交。

表单提交验证,提交前先通过JavaScript验证下手机号和姓名,此处记录的方法未采用ajax进行数据提交。

表单代码如下:

<form action="do.php" onSubmit="return submits(2);" enctype="multipart/form-data" method="post">
            <p class="banner_info_shuru">
              <input type="text" value="" name="name" class="attr" placeholder="姓名" id="name2">
            </p>
            <div class="space"></div>
            <p class="banner_info_shuru">
              <input type="text" value="" name="phone" class="attr" placeholder="手机号码" id="mobile2">
            </p>
            <div class="space"></div>
            <p class="banner_info_shuru">
              <input type="text" value="项目类型" name="content" class="attr" dvalue="项目类型" id="xiangmu2">
            </p>
            <input type="hidden" name='riqi' id='shijian0' style='width:250px'  class='intxt' value='' />
            <script>var d=new Date();riqi=d.toLocaleString(); $("#shijian").val(riqi);</script>
 
            <p><input type="submit" name="submit" value="立即预约" class='banner_yuyue_btn' /></p>
      </form>

form处设置了onSubmit="return submits()"属性,当点击submit提交按钮后,会先触发这个函数,该函数就是一个JavaScript方法。

代码如下:

function submits(type) {
console.log(type);
name=$("#name"+type).val();
phone=$("#mobile"+type).val();
    if(checkName(name,type)){
}else {
    return false;
}
    if(checkMobile(phone,type)){
}else{
    return false;
}
}pe) {


上述代码中用到了两个方法checkName()和checkMobile(),具体代码如下:

checkName:

//检查姓名
function checkName(name,type){
var len = getStrlen(name);
$("#err_box"+type).html("");
if(len == 0){
$("#name"+type).focus();
$("#err_box"+type).html("姓名不能为空");
return false;
}
if(len > 5){
$("#name"+type).focus();
$("#err_box"+type).html("姓名不能超过5个字");
return false;
}
return true;
}

checkMobile:

//检查联系方式
function checkMobile(mobile,type){
$("#err_box"+type).html("");
if(mobile == ''){
$("#mobile"+type).focus();
$("#err_box"+type).html("手机号不能为空");
return false;
}
if(mobile != ''){
var isMob=/^1[3-5,7,8]{1}[0-9]{9}$/;
if(!isMob.test(mobile)){
$("#mobile"+type).focus();
$("#err_box"+type).html("手机号格式不正确");
return false;
}
}
return true;
}


上面的type参数和id='name2'对应的,当同一页面中需要有两个以上验证的时候,通过type值的不同来获取对应不同的id值。


标签
onclick

本站部分技术文章为参考网上实用内容发布,目的是记录踩坑经验,若未备注来源而侵犯了您原创文章权益,请联系博主删除;对文章有不同看法的朋友欢迎在评论区留言互动

相关文章
  • HTML JS 弹层后底部页面禁止滚动处理

    HTML JS 弹层后底部页面禁止滚动处理

    浏览次数:886

  • 手机web页面调用打开QQ聊天功能

    手机web页面调用打开QQ聊天功能

    浏览次数:877

  • form表单提交,前端验证

    form表单提交,前端验证

    浏览次数:667

  • js刷新页面方法大全

    js刷新页面方法大全

    浏览次数:573

  • 关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

    关于layui富文本编辑器同步编辑器内容到textarea layedit.sync(index)

    浏览次数:554

  • JavaScript操作JSON操作文档

    JavaScript操作JSON操作文档

    浏览次数:514

  • 小程序开发中 var that = this的用法

    小程序开发中 var that = this的用法

    浏览次数:378

  • js中不存在exit函数,程序的运行中断停止,可使用return

    js中不存在exit函数,程序的运行中断停止,可使用return

    浏览次数:364

网友点评
功能开发中......其实是博主懒了而已......
0.640625s