jQuery中使用validate插件校验表单功能


Posted in jQuery onMay 24, 2019

一.功能效果

jQuery中使用validate插件校验表单功能

二.部分特殊规则

2.1 错误信息位置更改

在表单某选项中增加代码

<label class="error" for="表单中选项的name"></label>

例如 : 性别必选

<td>
 <input type="radio" id="male" value="m" name="sex"/>男
 <input type="radio" id="female" value="f" name="sex"/>女
 <!--这里设置表单校验错误信息的显示位置-->
 <label class="error" for="sex"></label>
</td>

2.2 身份证验证

在<script>标签中 , 增加身份证格式验证的自定义规则

/*身份证格式验证*/
$.validator.addMethod("card", function (value, element, params) {
  var reg = /^\d{15}(\d{2}[\dX])?$/i;
  return reg.test(value);
}, "idcard error");

在rule和message中增加相应的规则判定

$("#empForm").validate({
  rules: {
    idcard: {
      card: true
    }
  },
  messages: {
    idcard: {
      card: "请输入有效身份证号"
    }
  }
});

2.3 手机号验证

在<script>标签中 , 增加手机号格式验证的自定义规则

/*手机号格式验证*/
$.validator.addMethod("phone", function (value, element, params) {
  var reg = /^1[34578]\d{9}$/;
  return reg.test(value);
}, "phone error");

在rule和message中增加相应的规则判定

$("#empForm").validate({
  rules: {
    phone: {
      phone: true
    }
  },
  messages: {
    phone: {
      phone: "请输入有效身份证号"
    }
  }
});

jQuery中使用validate插件校验表单功能

三.整体代码

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>我的jquery表单校验页面</title>
  <style type="text/css">
    h1 {
      text-align: center;
    }
    table {
      width: 80%;
      margin: 0 auto;
      border-collapse: collapse;
    }
    td {
      padding: 10px 14px;
      border: 1px solid #999;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
<h1>员工信息录入</h1>
<form name="empForm" id="empForm" method="get" action="#">
  <table>
    <tr>
      <td>真实姓名(不能为空 ,没有其他要求)</td>
      <td><input type="text" id="realname" name="realname"/>
      </td>
    </tr>
    <tr>
      <td>登录名(登录名不能为空,长度应该在5-8之间:</td>
      <td><input type="text" id="username" name="username"/></td>
    </tr>
    <tr>
      <td>密码(不能为空,长度6-12之间):</td>
      <td><input type="password" id="pwd" name="pwd"/></td>
    </tr>
    <tr>
      <td>重复密码密码(不能为空,长度6-12之间):</td>
      <td><input type="password" id="pwd2" name="pwd2"/></td>
    </tr>
    <tr>
      <td>性别(必选其一)</td>
      <td>
        <input type="radio" id="male" value="m" name="sex"/>男
        <input type="radio" id="female" value="f" name="sex"/>女
        <!--这里设置表单校验错误信息的显示位置-->
        <label class="error" for="sex"></label>
      </td>
    </tr>
    <tr>
      <td>年龄(必填26-50):</td>
      <td><input type="text" id="age" name="age"/></td>
    </tr>
    <tr>
      <td>你的学历:</td>
      <td>
        <select name="edu" id="edu">
          <option value="">-请选择你的学历-</option>
          <option value="a">专科</option>
          <option value="b">本科</option>
          <option value="c">研究生</option>
          <option value="e">硕士</option>
          <option value="d">博士</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>兴趣爱好:</td>
      <td colspan="2">
        <input type="checkbox" name="hobby" id="pp" value="0"/>乒乓球
        <input type="checkbox" name="hobby" id="ym" value="1"/>羽毛球
        <input type="checkbox" name="hobby" id="sw" value="2"/>上网
        <input type="checkbox" name="hobby" id="ly" value="3"/>旅游
        <input type="checkbox" name="hobby" id="gw" value="4"/>购物
      </td>
    </tr>
    <tr>
      <td align="left">电子邮箱(格式正确):</td>
      <td><input type="text" id="email" name="email"/></td>
    </tr>
    <tr>
      <td align="left">身份证(15-18,格式正确):</td>
      <td><input type="text" id="idcard" name="idcard"/></td>
    </tr>
    <tr>
      <td align="left">手机号(格式正确):</td>
      <td><input type="text" id="phone" name="phone"/></td>
    </tr>
    <tr>
      <td></td>
      <td><input type="submit" id="smtBtn" value="保存"></td>
    </tr>
  </table>
</form>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/jquery.validate.min.js"></script>
<script>
 /*页面加载完成后,开启表单验证的功能,这样每输入一个就会及时校验一个*/
 $().ready(function () {
   /*校验表单项*/
   $("#empForm").validate({
     rules: {
       realname: {
         required: true
       },
       username: {
         required: true,
         rangelength: [5, 8]
       },
       pwd: {
         required: true,
         rangelength: [6, 12]
       },
       pwd2: {
         required: true,
         rangelength: [6, 12],
         /*重复密码需要与原密码相同的要求*/
         equalTo: "#pwd"
       },
       sex: {
         required: true
       },
       age: {
         required: true,
         range: [26, 50]
       },
       email: {
         email: true
       },
       idcard: {
         card: true
       },
       phone: {
         phone: true
       }
     },
     messages: {
       realname: {
         required: "真实姓名不能为空"
       },
       username: {
         required: "登录名不能为空",
         rangelength: "登录名长度要在5-8位之间"
       },
       pwd: {
         required: "密码不能为空",
         rangelength: "密码长度在6-12位之间"
       },
       pwd2: {
         required: "重复密码不能为空",
         rangelength: "重复密码长度在6-12位之间",
         equalTo: "重复密码与密码不一致"
       },
       sex: {
         required: "请选择性别"
       },
       age: {
         required: "年龄不能为空",
         range: "年龄必须在26-50岁之间"
       },
       email: {
         email: "请输入有效邮箱"
       },
       idcard: {
         card: "请输入有效身份证号"
       },
       phone: {
         phone: "请输入有效手机号"
       }
     }
   });
 });
 
 /*身份证格式验证*/
 $.validator.addMethod("card", function (value, element, params) {
   var reg = /^\d{15}(\d{2}[\dX])?$/i;
   return reg.test(value);
 }, "idcard error");
 
 
 /*手机号格式验证*/
 $.validator.addMethod("phone", function (value, element, params) {
   var reg = /^1[34578]\d{9}$/;
   return reg.test(value);
 }, "phone error");
</script>
</body>
</html>

四.validate表单校验常用规则

jQuery中使用validate插件校验表单功能

总结

以上所述是小编给大家介绍的jQuery中使用validate插件校验表单功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
jquery Form轻松实现文件上传
May 24 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
jquery+php后台实现省市区联动功能示例
May 23 #jQuery
jQuery Migrate 插件用法实例详解
May 22 #jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 #jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 #jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
Vue项目中使用jquery的简单方法
May 16 #jQuery
You might like
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python manage.py runserver流程解析
2019/11/08 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
小饰品店的创业计划书范文
2013/12/28 职场文书
个人简历自我评价范文
2014/02/04 职场文书
无偿献血倡议书
2014/04/14 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
初中家长评语大全
2014/12/26 职场文书
离婚协议书范本
2015/01/26 职场文书
英文邀请函
2015/02/02 职场文书
2015个人半年总结范文
2015/03/09 职场文书
学校推普周活动总结
2015/05/07 职场文书
单位工作证明范本
2015/06/15 职场文书
宿舍卫生管理制度
2015/08/05 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android