请选择 进入手机版 | 继续访问电脑版

jQuery表单验证(Validate)使用方法

[复制链接]
听见深浅 发表于 2021-1-2 18:59:25 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
表单的校验是jQuery给页面开辟者带来极大便利的功能之一,无论是在校大学生照旧已经上班的工程师,都可以相识一下表单校验的根本功能。

目次



1.先来一张简朴的表单

  1.            账号                  
复制代码
2.引入需要用到的jQuery

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

在页面的中写入JS代码
  1.       
复制代码
在原先页面的根本上,找到需要验证的输入框,在class中输入
  1. class="required"
复制代码
  1.            账号                  
复制代码

4.如何自界说报错信息的位置

比方我想让堕落信息出现在输入框的下方,该如何做呢。
也是比力简朴的,不外设计到页面的变更,只不外我们需要稍微修改一下页面的结构。
  1.                     账号        
  2.         
  3.            
复制代码

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

新增的JS代码
  1.       
复制代码
上述代码和原先相比,这里新增一个函数errorPlacement,errorPlacement这个函数是jQuery内置的,error体现错误信息,element体现校验的元素。
这里选择在元素的父元素(就是我们之前加的
)的下方添加错误信息,为了包管换行效果,还在此中添加了
元素。

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

比方长度限制、是否要求为整数等等,显然在class内里添加过多的元素并不是一个好主意,所以我们选择在JS中增加输入框的验证要求。
直接上代码
  1.       
复制代码
在之前的JS代码中,我们新增了rules,在rules中输入需要验证的输入框的id,然后输入需要限定的内容即可。
如上述代码所示,这里要求输入框的长度不得查过3个长度(有需要其他校验要求的可以百度一下看关键字是什么),同时要求输入的数字为整数,来看一下效果


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

又大概说,我希望自界说报错的信息。
在JS中新增一段代码
  1.         $.extend($.validator.messages, {        required: "这是必填字段"        })
复制代码
现在我们再来看看效果

固然了,没有界说的内容照旧默认显示英文。
7.动态生成的代码如何添加限定条件呢

在某些特定的场景下,页面上显示的内容都是根据数据库里返回的数据从而动态生成的,包罗输入框的校验要求,那该如那边置处罚呢。
这里我们就可以用到jQuery动态添加验证规则。
首先为了让代码更见简介,也能让各人更加清晰,我们先去掉手动添加的校验规则和自界说报错信息。
原始的JS代码如下:
  1.       
复制代码
使用jQuery动态添加验证规则的JS代码:
  1.       
复制代码
新增的一段代码是
  1.         $("#account").rules("add", {                required : true            });
复制代码
同理,如果我们希望整个页面都是动态的,只要包管配景返回的数据内里包罗:
1.页面元素ID
2.校验要求(如required,maxlength等等)
3.校验数值(比方true大概数字)

8.我想自界说校验规则的名字怎么办

现在来看,我们引入的都是在线亦大概是人家写好的validate.js,像number、digits等名字都是定好的,如果我想把number改为numberForMe之类的,要如何去做呢。
只要在JS内里加一个函数就可以了,如下所示:
  1.         jQuery.validator.addMethod("numberForMe",function(a,b){        //开始做校验,返回false体现要显示错误信息,返回true体现无需显示。        XXXXXX        return true大概false;        },$.validator.format("请输入数字")        );
复制代码
完整JS代码:
  1.       
复制代码
这样子即自界说了校验的名字,又可以自界说校验规则,还可以自界说校验的输出,一举多得。

来源:https://blog.csdn.net/qq_43576028/article/details/112060429
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )