jquery插件validate验证的小例子


Posted in Javascript onMay 08, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
   <!-- 注意引用顺序-->
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
    <script src="messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
//        $(function () {
//            $('#a').validate({
//                rules: {
//                    username: { required: true, minlength: 6, maxlength: 12 },
//                    email: { required: true, email: true }
//                },
//                errorshow: function (error, element) {
//                    error.appendTo(element.siblings('span'));
//                }
//            })

        //        })
        $(function () {
            $('#a').validate({
                rules: {
                    username: { required: true, minlength: 6, maxlength: 12 },
                    email: { required: true, email: true },
                    pwd: { required: true, rangelength:[6,6] },
                    again: { required: true, equalTo: ($('#aa')) }, //这里一定是id 
                    birthday:{date:true},
                    blood:{digits:true}
                },
                errorshow: function (error, element) {
                    error.appendTo(element.siblings('span'));
                }
            })
        })
    </script>
</head>
<body>
<form  id="a">
<div>
用户名:<input type="text" name="username" /><span style="width:100px"></span>
<br />
邮箱:<input type="text" name="email" /><span style="width:100px"></span>
<br />
密码:<input type="text" name="pwd" /><span style="width:100px" id="aa"></span>
<br />
确认密码:<input type="text" name="again"  /><span style="width:100px"></span>
<br />
生日:<input type="text" name="birthday" /><span style="width:100px"></span>
<br />
血压:<input type="text" name="blood" /><span style="width:100px"></span>
</div>
</form>
</body>
</html>
Javascript 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
提示$ is not defined错误分析及解决
Apr 09 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
jQuery ui插件的使用方法代码实例
May 08 #Javascript
js模拟select下拉菜单控件的代码
May 08 #Javascript
js工具方法弹出蒙版
May 08 #Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 #Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 #Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
May 07 #Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 #Javascript
You might like
php 使用post,get的一种简洁方式
2010/04/25 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
用户注册常用javascript代码
2009/08/29 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
wxPython中文教程入门实例
2014/06/09 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python最小二乘法矩阵
2019/01/02 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python 实用工具状态机transitions
2020/11/21 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
如何获得EntityManager
2014/02/09 面试题
新闻专业应届生求职信
2013/10/31 职场文书
人事部专员岗位职责
2014/03/04 职场文书
督导岗位职责范本
2015/04/10 职场文书
小英雄雨来观后感
2015/06/09 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript