Validate表单验证-阿里云开发者社区

Validate 是 jQuery 的一个子插件，该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。该插件捆绑了一套有用的验证方法，同时提供了一个用来编写用户自定义方法的 API。默认使用英语作为错误信息，且已翻译成其他 37 种语言，支持中文错误提示。

官网
基本用法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
  <form id="dhjForm">
    年龄：<input type="text" name="age" id="age"/> <br/>
    <input type="submit" name="submit" id="submit" value="提交"/>
  </form>
  <script type="text/javascript">
    $(function () {
        // 表单验证
        var validateForm = $("#dhjForm").validate({
            rules: {
                age: {
          digits: true,      //只能填写数字
          range: [0,100],    //年龄应为0~100 
          required: true,    //必填
        }
            }
        });
    });
  </script>
</body>
</html>

修改错误提示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
  <form id="dhjForm">
    年龄：<input type="text" name="age" id="age"/> <br/>
    电子邮件：<input type="text" name="email" id="email"/> <br/>
    <input type="submit" name="submit" id="submit" value="提交"/>
  </form>
  <script type="text/javascript">
  // 全局修改Validate错误提示信息，仅当前页有效
  $.extend($.validator.messages, {
    required: "这个为必填字段哦~",
    remote: "自定义校验错误~"
  });
    $(function () {
        // 表单验证
        var validateForm = $("#dhjForm").validate({
            rules: {
                age: {
          digits: true,      //只能填写数字
          range: [0,100],    //年龄应为0~100 
          required: true,    //必填
        },
        email: {
          email: true,      //必须是合法的邮箱地址
          required: true,    //必填
        }
            },
      messages:{
        // 修改年龄错误的提示信息，优先级高于全局错误提示
                age: {
          digits: "只能填写数字哦",
          range: "年龄应为0~100的数字", 
          required: "年龄age必填字段哦~",
        },
        email: {
          email: "邮箱格式错误",
        }
            }
        });
    });
  </script>
</body>
</html>

remote用法

// 前端代码片段，remote 和 equalTo用法
<form id="dhjForm">
  用户名：<input type="text" name="username" id="username"/> <br/>
  密码：<input type="password" name="password" id="password"/> <br/>
  重复密码：<input type="password" name="password2" id="password2"/> <br/>
  <input type="submit" name="submit" id="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function () {
  // 表单验证
  var validateForm = $("#dhjForm").validate({
    rules: {
      // rmote用法，用户名调用自定义接口校验
      username: {
        remote: {
          url: "${basePath}/dhj/userManage/checkUsername",   // 自定义接口
          type: "post",
          dataType: "json",
          data: {
            username: function () {
              return $("#username").val();
            }
          }
        }
      },
      // 密码重复校验
      password2: {
        equalTo: "#password"
      }
    },
    messages: {
      username: {
        remote: "用户名已存在！"
      },
      password2:{
        equalTo: "重复密码与原密码不同！"
      }
    }
  });
});
</script>

/**
 * Java后台代码片段，校验用户名唯一
 * @param username 用户名
 */
@PostMapping("dhj/userManage/checkUsername")
@ResponseBody
public boolean checkUsername(String username) {
  int count = userService.queryCountByName(username);
  return count == 0 ? true : false;
}

自定义校验类型

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
<form id="dhjForm">
  手机号：<input type="text" name="phone" id="phone"/> <br/>
  <input type="submit" name="submit" id="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function () {
  // 校验手机号
    jQuery.validator.addMethod("isPhone", function(value, element) {
        var length = value.length;
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请填写正确的手机号码");
  // 表单验证
  var validateForm = $("#dhjForm").validate({
    rules: {
      // 密码重复校验
      phone: {
        isPhone: true
      }
    }
  });
});
</script>
</body>
</html>

其他校验

// 校验IP
jQuery.validator.addMethod("isIp", function(value, element) {
  return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256));
}, "请输入正确的IP地址");
// 校验MAC
jQuery.validator.addMethod("isIp", function(value, element) {
  return this.optional(element) || (/[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}/.test(value));
}, "请输入正确的MAC地址");
// 邮政编码验证
jQuery.validator.addMethod("isPostCode", function(value, element) {
  return this.optional(element) || (/^[0-9]{6}$/.test(value));
}, "请正确填写您的邮政编码");
// 字母数字校验
jQuery.validator.addMethod("isLetAndNum", function(value, element){
  return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和数字");
// 汉字校验
jQuery.validator.addMethod("IsChina", function(value, element){
  return this.optional(element) || (/^[u4e00-u9fa5]+$/.test(value));
}, "请输入汉字");
// 字符验证
jQuery.validator.addMethod("IsChars", function(value, element){
  return this.optional(element) ||/^[u0391-uFFE5w]+$/.test(value);
}, "内容不允许包含特殊符号");
// 必须以特定字符串开头验证
jQuery.validator.addMethod("isBegin", function(value, element, param){
  var begin = new RegExp("^" + param);
  return this.optional(element) || (begin.test(value));
}, $.validator.format("输入的内容必须以 {0} 开头!"));
// 身份证号校验
$(function () {
    jQuery.validator.addMethod("isIdCard", function (value, element){
        return this.optional(element) || isIdCardNo(value);
    },"请输入合法的身份证号码");
});
// 校验身份证号的方法，规则太复杂，抽出成方法
function isIdCardNo(num) {
    var factorArr = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2, 1];
    var parityBit = ["1", "0", "X", "9", "8", "7", "6", "5", "4","3", "2"];
    var varArray= [];
    var lngProduct = 0;
    var intCheckDigit;
    var intStrLen = num.length;
    var idNumber= num;
    //initialize
    if(intStrLen !== 18) {
        return false;
    }
    // check andset value
    for (i = 0;i < intStrLen; i++) {
        varArray[i] = idNumber.charAt(i);
        if ((varArray[i] < '0' || varArray[i]> '9') && (i !== 17)){
            return false;
        } else if (i < 17) {
            varArray[i] = varArray[i] * factorArr[i];
        }
    }
    if(intStrLen === 18) {
        //check date
        var date8 = idNumber.substring(6, 14);
        if (!isDate8(date8)) {
            return false;
        }
        // calculate the sum of the products
        for (i = 0; i < 17; i++) {
            lngProduct = lngProduct + varArray[i];
        }
        // calculate the check digit
        intCheckDigit = parityBit[lngProduct % 11];
        // check last digit
        if (varArray[17] != intCheckDigit) {
            return false;
        }
    }else{
        return false;
    }
    return true;
}
// 18位身份证日期校验
function isDate8(sDate) {
    if(!/^[0-9]{8}$/.test(sDate)) {
        return false;
    }
    var year,month, day;
    year =sDate.substring(0, 4);
    month =sDate.substring(4, 6);
    day =sDate.substring(6, 8);
    var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30,31];
    if (year< 1700 || year > 2500) {
        return false;
    }
    if (((year %4 == 0) && (year % 100 != 0)) ||(year % 400 == 0)) {
        iaMonthDays[1] = 29;
    }
    if (month< 1 || month > 12) {
        return false;
    }
    return !(day < 1 || day > iaMonthDays[month - 1]);
}

Validate支持校验数据

序号	校验类型	取值	描述说明
1	required	true/false	必填字段，提交的时候校验。
2	remote	url接口地址	用户自定义校验规则，使用ajax方法请求指定的url接口地址，接口返回必须是ture/false。ture表示校验通过，false表示不通过，显示错误提示。
3	email	true/false	必须输入正确格式的电子邮件。
4	url	true/false	必须输入正确格式的网址。
5	date	true/false	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO	true/false	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number	true/false	必须输入合法的数字（负数，小数）。
8	digits	ture/false	必须输入整数。
9	creditcard	true/false	必须输入合法的信用卡号。
10	equalTo	#nodeId	输入的值必须和id为nodeId的值相同。
11	accept	文件类型	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength	num	输入长度最长是 num（汉字算一个字符）。
13	minlength	num	输入长度最短是 num（汉字算一个字符）。
14	rangelength	[minL,maxL]	输入长度必须介于 minL 和 maxL 之间（汉字算一个字符）。
15	range	[min,max]	输入的值转成数字（包括小数）必须介于 5 和 10 之间。
16	max	num	输入的值转成数字（包括小数）不能大于 num。
17	min	num	输入的值转成数字（包括小数）不能小于 num。

Validate表单验证

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Validate表单验证

热门文章

最新文章

相关电子书