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 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
JQuery animate动画应用示例
May 14 jQuery
JavaScript实现美化滑块效果
May 17 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 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 将excel导入mysql
2009/11/09 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php去掉文件前几行的方法
2015/07/29 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
广告显示判断
2006/08/31 Javascript
广告代码静态化js通用函数
2007/05/09 Javascript
DIV菜单层实现代码
2010/11/19 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
jQuery垂直多级导航菜单代码分享
2015/08/18 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
Python语言进阶知识点总结
2019/05/28 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
开业庆典答谢词
2014/01/18 职场文书
学籍证明模板
2015/06/18 职场文书
团结友爱主题班会
2015/08/13 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫