官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation

一导入js库

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

二、默认校验规则

(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true                 必须输入合法的数字(负数,小数)
(8)digits:true                 必须输入整数
(9)creditcard:                 必须输入合法的信用卡号
(10)equalTo:"#field"           输入值必须和#field相同
(11)accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                      输入值不能大于5
(17)min:10                     输入值不能小于10

三、默认的提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

如需要修改,可在js代码中加入:

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} 的值")
});

推荐做法,将此文件放入messages_cn.js中,在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>

四、使用方式

1.将校验规则写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

使用class="{}"的方式,必须引入包:jquery.metadata.js

可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:true,minlength:5,equalTo:'#password'}"

2.将校验规则写到js代码中

$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});

//messages处,如果某个控件没有message,将调用默认的信息

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 必须有值
required:"#aa:checked"表达式的值为真,则需要验证
required:function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素

转载于:https://www.cnblogs.com/anbylau2130/archive/2013/05/21/3090158.html

jquery 验证控件相关推荐

  1. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  2. Asp.Net就业课之三验证控件

    验证控件 作用:验证信息是否正确.有效.合理. 一.数据有效性验证方式 1.后台C#代码验证: ​ 信息页面回传,回传到服务器,用户体验不好,服务器压力大.有很多个客户端网页的时候,1000万级别,会 ...

  3. [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由...

    2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...

  4. 弹出框页面中使用jquery.validate验证控件

    弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...

  5. 验证控件jQuery Validation Engine调用外部函数验证

    在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证.自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有 ...

  6. [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...

    在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对jQuery.Valid ...

  7. WebForm常见错误之验证控件报错

    目录 [问题描述] [原因分析:] [解决方案] 方案1: 方案2(推荐): 方案3: 方案4: [问题描述] 当我们在开发过程中,有时候会遇到一些莫名其名的错误. 很多小伙伴看到这个问题,当时就蒙了 ...

  8. input 起止时间_给表单验证控件添加结束时间不得小于开始时间的验证方法

    //引入验证控件JS function getDate(strDate) { var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$) ...

  9. webform里的验证控件

    1.非空验证控件:RequireFieldValidator  :2.数据比较验证:CompareValidator :3.数据范围验证:RangeValidator :4.正则表达式验证:Regul ...

最新文章

  1. 波士顿动力机器狗再进化:已学会自主规划路线
  2. AutoCAD2012打开后一闪的解决方法
  3. 联想杜比音效_联想小新15 2020锐龙版开售
  4. 软考高项之各大管理计划内容-攻坚记忆
  5. Silverlight Tips(1)
  6. 【效率】再见 Typora,这款 Markdown 编辑器开源又免费!
  7. 这所双非高校硕士生一作发Science!系学校上半年第13篇CNS!
  8. scaleType属性设置!
  9. CMake-add_executable()
  10. wget在进行https下载时超时不生效问题
  11. 如何查看linux 版本
  12. 疫情核酸检测,应考虑使用刷身份证的方式
  13. 【AI每日播报】霍金:AI将让中产阶级大面积失业
  14. mysql本机ip一般是多少_localhost简介、localhost与 127.0.0.1 及 本机IP 的区别
  15. LINUX关闭防火墙、开放特定端口等常用操作
  16. 【免费分享】2022新版海螺影视主题模板M3.1版本多功能苹果CMSv10后台自适应模板详解
  17. 【高性能计算】HPC概述
  18. 微信支付 Verify the signature and get the Wechatpay certificate corresponding to serialnumber[X] is empt
  19. C# WINFORM 主窗口把数据传给子窗口,编辑后再返回主窗口
  20. 风口上的线上盲盒小程序

热门文章

  1. CentOS安装sshd服务
  2. DuiC 统一配置管理 2
  3. 《HBase企业应用开发实战》—— 2.5 停止HBase集群
  4. 瑞士科学家3D打印出5纳米厚的传感器
  5. 虚拟机里安装Linux系统出现乱码
  6. UNITY_MATRIX_IT_MV[Matrix]
  7. 我之我见:samba共享
  8. 关于 调用 JNI JAR java 的说明和注意事项,调用第 靠写不下了
  9. Microsoft-Office-Professional-Plus-2007
  10. 我的Android进阶之旅------Android Studio 快捷键整理分享