【js】【前台输入效验】【validate插件的使用】 前端

版权声明：本文为蔡俊锋博主原创文章，未经蔡俊锋博主允许不得转载。 https://blog.csdn.net/caijunfen/article/details/82147730

required:true 　　　 　　 必输字段

remote:”check.php” 　 使用ajax方法调用check.php验证输入值

email:true 　　　　　　　 必须输入正确格式的电子邮件

url:true　　　　　　　　　必须输入正确格式的网址

date:true　　　　　　　　 必须输入正确格式的日期

dateISO:true 　　　　　必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

number:true　　　　　　　必须输入合法的数字(负数，小数)

digits:true 　　　　　　　　必须输入整数

creditcard:　　　　　　　　 必须输入合法的信用卡号

equalTo:”#field”　　　　输入值必须和#field相同

accept　　　　　　　　　 输入拥有合法后缀名的字符串（上传文件的后缀）

maxlength:5　　　　　　　 输入长度最多是5的字符串(汉字算一个字符)

minlength:10 　　　　 　　 输入长度最小是10的字符串(汉字算一个字符)

rangelength:[5,10]　　　　 输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)

range:[5,10] 　　　　　　　输入值必须介于 5 和 10 之间

max:5 　　　　　　　　　　输入值不能大于5

min:10 　　　　　　　　　输入值不能小于10

代码

在jsp中声明使用js和validate

<script type="text/javascript" src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
  
  

   
   
1
   
   
2
  
  

设置效验规则

    //设置效验规则
    var rules={
            "字段的id/name":{
                内建规则名:值,
                内建规则名:值,
            },          

            "employee.userName": {
                required: true,
                minlength: 6
            },
            "employee.password": {
                required: true,
                minlength: 5
            },
            "employee.email": "email",
            "rePassword":{
                required: true,
                equalTo:"[id='employee.password']"
            }
        };
  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
   
   
15
   
   
16
   
   
17
   
   
18
   
   
19
   
   
20
   
   
21
  
  

//设置错误信息
//{0}表示规则中的第一个数值
    var messages={
            "字段的id/name":{
                内建规则名:"输出的错误内容",
                内建规则名:"输出的错误内容",
            }
            "employee.userName": {
                required: "必须填写帐号",
                minlength: "帐号长度不能小于{0}个字符"
            },
            "employee.password": {
                required: "必须填写密码",
                minlength: "密码长度不能效益{0}个字符"
            }
    };

  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
   
   
7
   
   
8
   
   
9
   
   
10
   
   
11
   
   
12
   
   
13
   
   
14
   
   
15
   
   
16
   
   
17
  
  

$(function(){
    //生成效验
    $("#表格的id").validate({
        rules:rules,
        messages: messages      
})
  
  

   
   
1
   
   
2
   
   
3
   
   
4
   
   
5
   
   
6
  
  

修改默认的错误信息

在validate中,对错误信息有默认值,当不写效验的message时候,有默认错误信息代为输出.
我们可以修改其默认错误信息,再以js文件显示导入到html中

jQuery.extend(jQuery.validator.messages, { 

        required: “必选字段”, 

  remote: “请修正该字段”, 

  email: “请输入正确格式的电子邮件”, 

  url: “请输入合法的网址”, 

  date: “请输入合法的日期”, 

  dateISO: “请输入合法的日期 (ISO).”, 

  number: “请输入合法的数字”, 

  digits: “只能输入整数”, 

  creditcard: “请输入合法的信用卡号”, 

  equalTo: “请再次输入相同的值”, 

  accept: “请输入拥有合法后缀名的字符串”, 

  maxlength: jQuery.validator.format(“请输入一个长度最多是 {0} 的字符串”), 

  minlength: jQuery.validator.format(“请输入一个长度最少是 {0} 的字符串”), 

  rangelength: jQuery.validator.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”), 

  range: jQuery.validator.format(“请输入一个介于 {0} 和 {1} 之间的值”), 

  max: jQuery.validator.format(“请输入一个最大为 {0} 的值”), 

  min: jQuery.validator.format(“请输入一个最小为 {0} 的值”) 

});