使用jQuery validate 验证注册表单实例演示


Posted in Javascript onMarch 25, 2013

Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,功能也足够一般的需要了。rules也足够简单,很容易上手,举个简单的例子,用validation来验证注册表单。

首先确定验证的目标是:
1. 必填项不能为空
2. 注册用户名必须为6-12个字符内
3. 合格的email格式
4. 密码必须为6-18个字符
5. 确认密码必须跟密码一致

ok,目标很明确了。正片开始

<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="../lib/jquery.validate.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$( "#regForm" ).validate({ 
rules: { 
// 注册用户名 
username: { 
required: true, 
minlength: 5, 
maxlength: 12 
}, 
// email 
email: { 
required: true, 
email: true 
}, 
// 密码 
password: { 
required: true, 
minlength: 6, 
maxlength: 18 
}, 
// 确认密码 
confirm_password: { 
equalTo:"#password" 
}, 
// 检验验证码 
captcha: { 
required: true, 
remote: "checkCaptcha.php" 
} 
}, 
messages: { 
// 注册用户名 
username: { 
required: "此项不能为空", 
minlength: "不能少于5个字符", 
maxlength: "不能多于12个字符" 
}, 
// email 
email: { 
required: "此项不能为空", 
email: "email格式不正确" 
}, 
// 密码 
password: { 
required: "此项不能为空", 
minlength: "不能少于6个字符", 
maxlength: "不能多于18个字符" 
}, 
// 确认密码 
confirm_password: "两次输入密码不一致", 
// 检验验证码 
captcha: { 
required: "请输入验证码", 
remote: "验证码输入错误" 
} 
} 
}); 
}); 
</script>

运行后,得到下面的结果
使用jQuery validate 验证注册表单实例演示

更多用法参考 https://3water.com/article/24405.htm

Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
Javascript 普通函数和构造函数的区别
Nov 05 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 #Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 #Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 #Javascript
js 字符串转换成数字的三种方法
Mar 23 #Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 #Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 #Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 #Javascript
You might like
PHP初学入门
2006/11/19 PHP
PHP基础学习小结
2011/04/17 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
js函数般调用正则
2008/04/08 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python与Redis的连接教程
2015/04/22 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
详解Python 函数如何重载?
2019/04/23 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Java面试题汇总
2015/12/06 面试题
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
放射科岗位职责
2015/02/14 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
入党申请书怎么写?
2019/06/21 职场文书
python - asyncio异步编程
2021/04/06 Python