表单的校验是jQuery给页面开发者带来极大便利的功能之一,无论是在校大学生还是已经上班的工程师,都可以了解一下表单校验的基本功能。

目录

  • 1.先来一张简单的表单
  • 2.引入需要用到的jQuery
  • 3.指定需要验证的内容
  • 4.如何自定义报错信息的位置
  • 5.如何添加其他的验证信息呢
  • 6.如何让显示的内容为中文呢
  • 7.动态生成的代码如何添加限定条件呢
  • 8.我想自定义校验规则的名字怎么办

1.先来一张简单的表单

    <form id="login"><label for="account" >账号</label><input  id="account" name="account" /><input type="submit" value="提交"/></form>

2.引入需要用到的jQuery

方便起见我们直接引入在线的jQuery,一个基本的jquery.js和一个表单验证需要用到的jquery.validate.js。
如果有需要的话可以直接将连接复制到浏览器打开,复制页面上的内容,粘贴到本地文件也是可以的。

 <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script><script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

3.指定需要验证的内容

在页面的<head></head>中写入JS代码

       <script>$().ready(function() {  $("#login").validate();  });  </script>

在原先页面的基础上,找到需要验证的输入框,在class中输入

class="required"
    <form id="login"><label for="account" >账号</label><input  id="account" name="account" class="required"/><input type="submit" value="提交"/></form>

4.如何自定义报错信息的位置

例如我想让出错信息出现在输入框的下方,该如何做呢。
也是比较简单的,不过设计到页面的变动,只不过我们需要稍微修改一下页面的布局。

    <form id="login"><div><label for="account" >账号</label><input  id="account" name="account" class="required"/><br></div><input type="submit" value="提交"/></form>


有看出和原来的区别吗?我们在输入框的周围加了一层<div></div>,同时为了确保错误信息可以显示在输入框的下方,我们还添加了一个<br>

新增的JS代码

       <script>$().ready(function() {  $("#login").validate({errorPlacement: function(error, element) {error.appendTo(element.parent()); }});});  </script>

上述代码和原先相比,这里新增一个函数errorPlacement,errorPlacement这个函数是jQuery内置的,error表示错误信息,element表示校验的元素。
这里选择在元素的父元素(就是我们之前加的<div></div>)的下方添加错误信息,为了保证换行效果,还在其中添加了<br>元素。

5.如何添加其他的验证信息呢

例如长度限制、是否要求为整数等等,显然在class里面添加过多的元素并不是一个好主意,所以我们选择在JS中增加输入框的验证要求。
直接上代码

       <script>$().ready(function() {  $("#login").validate({errorPlacement: function(error, element) {error.appendTo(element.parent()); },rules:{account:{maxlength:3,digits:true}}});});  </script>

在之前的JS代码中,我们新增了rules,在rules中输入需要验证的输入框的id,然后输入需要限定的内容即可。
如上述代码所示,这里要求输入框的长度不得查过3个长度(有需要其他校验要求的可以百度一下看关键字是什么),同时要求输入的数字为整数,来看一下效果

6.如何让显示的内容为中文呢

又或者说,我希望自定义报错的信息。
在JS中新增一段代码

        $.extend($.validator.messages, {required: "这是必填字段"})

现在我们再来看看效果

当然了,没有定义的内容还是默认显示英文。

7.动态生成的代码如何添加限定条件呢

在某些特定的场景下,页面上显示的内容都是根据数据库里返回的数据从而动态生成的,包括输入框的校验要求,那该如何处理呢。

这里我们就可以用到jQuery动态添加验证规则。

首先为了让代码更见简介,也能让大家更加清晰,我们先去掉手动添加的校验规则和自定义报错信息。
原始的JS代码如下:

       <script>$().ready(function() {  $("#login").validate({errorPlacement: function(error, element) {error.appendTo(element.parent()); }});});  </script>

使用jQuery动态添加验证规则的JS代码:

       <script>$().ready(function() {  $("#login").validate({errorPlacement: function(error, element) {error.appendTo(element.parent()); }});$("#account").rules("add", {required : true});});  </script>

新增的一段代码是

        $("#account").rules("add", {required : true});

同理,如果我们希望整个页面都是动态的,只要保证后台返回的数据里面包含:
1.页面元素ID
2.校验要求(如required,maxlength等等)
3.校验数值(例如true或者数字)

8.我想自定义校验规则的名字怎么办

目前来看,我们引入的都是在线亦或者是人家写好的validate.js,像number、digits等名字都是定好的,如果我想把number改为numberForMe之类的,要如何去做呢。
只要在JS里面加一个函数就可以了,如下所示:

 jQuery.validator.addMethod("numberForMe",function(a,b){//开始做校验,返回false表示要显示错误信息,返回true表示无需显示。XXXXXXreturn true或者false;},$.validator.format("请输入数字"));

完整JS代码:

      <script>$().ready(function() {  $("#login").validate({errorPlacement: function(error, element) {error.appendTo(element.parent()); }});$("#account").rules("add", {numberForMe: true});jQuery.validator.addMethod("numberForMe",function(a,b){return XXXXX},$.validator.format("请输入数字"));</script>

这样子即自定义了校验的名字,又可以自定义校验规则,还可以自定义校验的输出,一举多得。

jQuery表单验证(Validate)使用方法相关推荐

  1. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 1 &l ...

  2. jQuery 表单验证插件,jQuery Validation Engine用法详解

    jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...

  3. jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集  jQuery框架学习第四天:使用jQ ...

  4. jQuery 表单验证设置html(,jquery表单验证

    如何用jquery进行表单验证 (1)所需工具: jQuery.1.8.3.js和jquery.validate.js,百度jquery validate插件即可找到下载 (2)引入js (3)按照插 ...

  5. 12个方便易用的jquery表单验证插件

    绝大部分网站都是开放注册的,而注册就需要使用表单验证,因为网站都需要对注册用户的信息安全性和合理性做出判断,表单的注册都应该具备完善的验证方式,比如注册使用的手机号是否是真实的?用户填写的验证码是否正 ...

  6. jquery表单验证小结

    jquery表单验证小结 下面将讲述的是一个完整的jquery表单验证实例,该实例覆盖了jquery验证的大部分知识点,比如验证框架,messages的扩展和自定义方法的定义以及在验证中的应用等,接下 ...

  7. jQuery 表单验证插件jQuery Validation Engine用法详解

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. jQuery Validation ...

  8. 一款比较实用齐全的jQuery 表单验证插件

    一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...

  9. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  10. jQuery 表单验证设置html(,jquery表单验证.html

    jquery表单验证 .myform { width: 600px; margin: 50px auto 0; } .p { border: 1px #cecece solid; width: 480 ...

最新文章

  1. 小程序云开发 一开通云开发,给数据库添加一条记录
  2. 教你用ERD轻松修改系统登录密码
  3. QT中无法使用10^n次方来计算
  4. 【复习资料】设计模式
  5. HDU - 4612 Warm up(边双缩点+树的直径)
  6. ln函数怎么看奇偶性_Python中函数的参数应该怎么理解?看完这篇文章情不自禁的想收藏...
  7. “创新”,我们应该如何去做?
  8. 一统江湖的大前端(3) DOClever——你的Postman有点Low
  9. [转载] Python数据分析之Matplotlib数据可视化实例
  10. mysql之获取自增长的ID
  11. selenium调用浏览器进行抓取页面
  12. 每个叶子节点(nil)是黑色。_129. 求根到叶子节点数字之和
  13. 计算机的排版方法,计算机编辑排版系统及其方法
  14. pxe服务器 安装系统,通过PXE网络安装windows系统
  15. 赵小楼《天道》《遥远的救世主》深度解析(90)谈经论道说心安
  16. 什么是网络编程(一)
  17. 阿里云服务(四)—云数据库RDS
  18. 报错:v-html will override element children 解决方法
  19. 腾讯后端面试题python_python技术面试题(十九)--腾讯
  20. 【C++训练】 一个球从100m高度自由落下,每次落地后反跳回原来高度的一半,再落下,再反弹.求它在第N次落地时共经过多少米?

热门文章

  1. 码住!稀奇古怪但有用的网站
  2. 献给阿尔吉侬的花束(BFS)
  3. css使形状变成圆形,CSS 3形状:“反向圆”或“剪切圆”
  4. sql yog注册码
  5. 软件工程之模块独立性
  6. leetcode1552. 两球之间的磁力(Python3、c++)
  7. python测试开发django-124.bootstrap点删除按钮弹确认删除
  8. 国内大型门户网站架构分析-静态化网站架构
  9. 如何愉快的填写问卷星
  10. 用户运营中,培养种子用户的三种模式