validate表单验证

validate是一款优秀的表单验证插件,内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则  自定义验证规则:可以很方便的 自定义验证规则  简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能  实 时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。

使用方法

导库

导入jquery.js,导入validate.js 

通过jqrery的选择器找到要验证的表单

修改错误提示

// 全局修改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: "邮箱格式错误",
    }
       }
       });
 }

remote用法

$(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: "重复密码与原密码不同!"
           }
          }
       });
});
     序号        校验类型       取值          描述说明
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。

 

 

你可能感兴趣的:(jquery)