使用简单jQuery工具来实现表单的验证
2015-12-14 22:10
681 查看
在web开发过程中,验证环节不可缺少。其中可以分为客户端和服务端两部分的验证:客户端,就是通过写js代码来实现对提交表单的验证;服务端,就是通过写逻辑编写java代码来实现表单的验证,在实际开发过程中他们都各自发挥不同的作用。下面就基于客户端表单验证来简单介绍jquery旗下的一个验证框架jquery.validate。
首先,通过这个框架我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支持。所以说jquery.validate对web开发来说非常实用的。
2.指定哪个(或哪些)表单要在提交前先进行验证
注意:上面函数中“#testForm”意思是寻找Id属性,很多情况直接写成“form”表示直接对整个表单进行验证。
3.指定每个字段的验证规则
效果图如下:
基础使用过程
把验证规则写到字段元素的class属性中
以上用了两种方式:
1,指定多个class名称(验证规则),多个class名称之间用空格隔开,如:class=”required email”。
2,使用JSON对象,指定多个属性,如:class=”{required: true, minlength: 3}”。可以为某验证规则指定所用的参数,如minlength规则需要指定最小长度,这里为3。
3,混合使用,如:class=”{equalTo:’[#password1]’} required”。
说明:
1,如果使用第2种方式(JSON对象),就必须引入:jquery.metadata.js,作用是解析JSON对象。
2,如果表单字段的name不能重复,则只有最前面的配置起作用。
内置验证规则:
插件掩码可以自己在网上下载。
首先,通过这个框架我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支持。所以说jquery.validate对web开发来说非常实用的。
步骤:
1.导入的jQuery.js与jquery.validate.js等文件,注意顺序不要颠倒<script type="text/javascript" src="jquery.js"> <script type="text/javascript" src="jquery.metadata.js"> <script type="text/javascript" src="jquery.validate.js">
2.指定哪个(或哪些)表单要在提交前先进行验证
<script type="text/javascript"> $(function(){ $("#testForm").validate(); }); </script>
注意:上面函数中“#testForm”意思是寻找Id属性,很多情况直接写成“form”表示直接对整个表单进行验证。
<script type="text/javascript"> $(function(){ $("form").validate(); }); </script>
3.指定每个字段的验证规则
<input type="text" name="loginName" class="required">
效果图如下:
基础使用过程
把验证规则写到字段元素的class属性中
用户名:<input type="password" name="password" class="required"> 电子邮件:<input type="text" name="email" class="required email"> 密码:<input type="password" name="password" id="password1" class="{required: true, minlength: 3}"> 再次输入密码:<input type="password" name="password2" class="{equalTo:'[#password1]'} required">
以上用了两种方式:
1,指定多个class名称(验证规则),多个class名称之间用空格隔开,如:class=”required email”。
2,使用JSON对象,指定多个属性,如:class=”{required: true, minlength: 3}”。可以为某验证规则指定所用的参数,如minlength规则需要指定最小长度,这里为3。
3,混合使用,如:class=”{equalTo:’[#password1]’} required”。
说明:
1,如果使用第2种方式(JSON对象),就必须引入:jquery.metadata.js,作用是解析JSON对象。
2,如果表单字段的name不能重复,则只有最前面的配置起作用。
内置验证规则:
插件掩码可以自己在网上下载。
相关文章推荐
- JQuery 如何选择带有多个class的元素
- jQuery 多个 classes 选择器
- jQuery Ajax 实例 全解析(转)
- jQuery选择器总结
- jquery获取select选择的显示值
- 三个容易混淆的jquery选择器
- 三个容易混淆的jquery选择器
- 20151214 jquery插件代码备份
- jQuery源码分析之tearDown和setup
- jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
- jquery的layer弹出层框架,如果设置 iframe弹出一个页面里是表单提交,提交完怎么关闭弹出层
- Jquery清除:hover事件
- 如何使用jQuery设置背景的透明度
- jquery .index()一直返回-1的问题
- jquery dwn 开发学习
- jquery.cookie 使用方法
- jQuery+json实现的简易Ajax调用实例
- <学习笔记> jQuery Mobile 入门
- 浅析jQuery中常用的元素查找方法总结
- <学习笔记>jQuery Mobile 实例教程