使用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学习笔记 更改jQuery对象
Sep 19 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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中mkdir函数用法实例分析
2014/11/15 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
小程序实现列表倒计时功能
2021/01/29 Javascript
python中比较两个列表的实例方法
2019/07/04 Python
django 控制页面跳转的例子
2019/08/06 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
python 下载文件的多种方法汇总
2020/11/17 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
简述安装Slackware Linux系统的过程
2012/05/08 面试题
什么是方法的重载
2013/06/24 面试题
中学门卫岗位职责
2013/12/26 职场文书
暑假家长评语大全
2014/04/17 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
单位租房协议书样本
2014/10/30 职场文书
合理化建议书
2015/02/04 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Redis全局ID生成器的实现
2022/06/05 Redis