使用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 相关文章推荐
用jquery实现学校的校历(asp.net+jquery ui 1.72)
Jan 01 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
Feb 22 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
分析JS中this引发的bug
Dec 12 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
多个表单中如何获得这个文件上传的网址实现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学习笔记之二 php入门知识
2011/01/12 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
实现python版本的按任意键继续/退出
2016/09/26 Python
浅谈五大Python Web框架
2017/03/20 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
如何基于Python按行合并两个txt
2020/11/03 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
体育教育个人自荐信范文
2013/12/01 职场文书
上班早退检讨书
2014/01/09 职场文书
英语自我评价范文
2014/01/24 职场文书
干部鉴定材料
2014/05/18 职场文书
留守儿童工作方案
2014/06/02 职场文书
园林技术专业求职信
2014/07/28 职场文书
中秋节活动总结
2014/08/29 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
前台接待岗位职责范本
2015/04/03 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript