jQuery Validate插件实现表单强大的验证功能


Posted in Javascript onDecember 18, 2015

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

第一节:jQuery Validation让验证变得如此容易

一、官网下载jquery,和jquery validation plugin
二、引入文件

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

三、接下来,声明下面的HTML片段

<form action="" id="jvForm"> 
 姓名:<input type="text" name="username" id="username" class="required" /></br> 
 密码:<input type="password" name="password" id="password" class="required"/></br> 
 <input type="submit" value="提交" /> 
</form>

通过以上代码,大家会发现我们对于每一个input都加上了class="required"
他的作用就是在这个inpute标签为空时会提示用户出错。
四、最后我们要为我们的框架找到一个切入点

<script type="text/javascript"> 
 $(function() { 
  $("#jvForm").validate(); 
 }) 
</script>

运行效果如下

jQuery Validate插件实现表单强大的验证功能 

当然提示信息默认是英文的,可根据需要在jquery.validate.js里修改。

第二节:jQuery Validation让验证变得如此容易

上一个例子我们是统一引用jquery.validate.js这样所有必填字段的提示信息都将是This field is required.
现在要改成动态提示,比如姓名如果为空则提示姓名不能为空,密码如果为空则提示密码不能为空。
这次我们将校验规则写在代码里
首先还是先引入文件

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

接下来,声明下面的HTML片段

<form action="" id="jvForm"> 
 姓名:<input type="text" name="username" id="username" /></br> 
 密码:<input type="password" name="password" id="password" /></br> 
 <input type="submit" value="提交" /> 
</form>

和之前的相比没有了class="required"
最后 校验规则如下:

$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { 
    required: true 
   }, 
   password: { 
    required: true 
   } 
  }, 
  messages: { 
   username: { 
    required: "姓名不能为空!" 
   }, 
   password: { 
    required: "密码不能为空!" 
   } 
  } 
 }); 
})

运行效果如下

jQuery Validate插件实现表单强大的验证功能 

第三节:jQuery Validation让验证变得如此容易

以下代码进行对jQuery Validation的简单演示包括必填项、字符长度,格式验证
一、引入文件

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

二、声明HTML片段

<form action="" id="jvForm"> 
  用 户 名:<input type="text" name="username"/></br> 
  密 码:<input type="password" name="password" id="password"/></br> 
  确认密码:<input type="password" name="confirm_password"/></br> 
  出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option> 
 <option value="1">上海</option><option value="1">深圳</option></select></br> 
  手 机:<input type="text" name="mobile" /></br> 
  邮 箱:<input type="text" name="email" /></br> 
  <input type="submit" value="提交" /> 
</form>

三、错误提示样式

<style type="text/css"> 
 label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;} 
</style>

四、验证代码

<script type = "text/javascript"> 
$(function() { 
 $("#jvForm").validate({ 
  rules: { 
   username: { //用户名必填 至少3位 
    required: true, 
    minlength: 3 
   }, 
   password: { //密码必填 至少6位 
    required: true, 
    minlength: 6 
   }, 
   confirm_password: { //密码确认 
    required: true, 
    equalTo: "#password" 
   }, 
   address: { //出生地必填 
    required: true 
   }, 
   mobile: { //手机必填 验证格式 
    required: true, 
    mobile: true 
   }, 
   email: { //email必填 验证格式 
    required: true, 
    email: true 
   }, 
 
  }, 
  messages: { 
   username: { 
    required: "用户名不能为空!", 
    minlength: "用户名至少三位!" 
   }, 
   password: { 
    required: "密码不能为空!", 
    minlength: "密码至少六位!" 
   }, 
   confirm_password: { 
    required: "密码确认不能为空!", 
    equalTo: "两次输入密码不一致 !" 
   }, 
   address: { 
    required: "请选择出生地!", 
   }, 
   mobile: { 
    required: "手机不能为空!", 
    mobile: "手机格式不正确", 
   }, 
   email: { 
    required: "邮箱不能为空!", 
    email: "邮箱格式不正确", 
   }, 
  } 
 }); 
}) 
</script>

因为jquery.validate.js中没有mobile验证,所以需要自己增加一个
首先找到messages 在里面添加mobile 如下:

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).", 
 number: "Please enter a valid number.", 
 mobile: "请填写正确的手机号码.", 
 digits: "Please enter only digits.", 
 creditcard: "Please enter a valid credit card number.", 
 equalTo: "Please enter the same value again.", 
 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}.") 
}

然后在methods中添加mobile的正则校验

mobile: function( value, element ) { 
 return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value); 
}

运行效果

jQuery Validate插件实现表单强大的验证功能

以上就是为大家展示的jQuery Validate 插件为表单提供了强大的验证功能,希望大家喜欢。

Javascript 相关文章推荐
基于jquery tab切换(防止页面刷新)
May 23 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 10 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 #Javascript
学习jQuey中的return false
Dec 18 #Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
原生js实现图片轮播特效
Dec 18 #Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 #Javascript
You might like
简化php模板页面中分页代码的解析
2009/02/06 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php实现字符串首字母转换成大写的方法
2015/03/17 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
Python的time模块中的常用方法整理
2015/06/18 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
pyqt5自定义信号实例解析
2018/01/31 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python算法的时间复杂度和空间复杂度(实例解析)
2019/11/19 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
应届生程序员求职信
2013/11/05 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
调解书格式范本
2015/05/20 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL