当前位置：文档之家 › 表单验证(Jquery)

表单验证(Jquery)

  • 格式：doc
  • 大小：73.50 KB
  • 文档页数：15

jquery验证表单很简单的方法jquery验证表单很简单的方法现在网上有很多jquery验证表单的插件，但都写的比较复杂。

一般都有两三个文件。

我今天写一个最简单但是很实用的验证登录表单的方法。

我基本上只是给大家提供一种思路。

jquery插件一般也是按这个思路写的。

大家可以按这个思路去扩展，不过只要实用越简单越好代码如下,应“zhuyanrong”的要求加入radio的验证其实那个很简单，需要注意的是radio要用click事件而不能用blur事件<script type="text/javascript">//首先要加载jquery库文件，因为这里只是给大家演示，所以我就不加载了。

//下面为jquery代码$(function(){$("#name").blur(function(){//用户名文本框失去焦点触发验证事件if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证不能为空并且只能为英文或者数字或者下划线组成的２－１５个字符{$("#nameTip").html("用户名不能为空且只能为英文或者数字");}else{$("#nameTip").html("输入正确");}});$("#pas1").blur(function(){//用户密码框失去焦点触发验证事件if(!$(this).val || !$(this).val.match(/([w]){2,15}$/))//只处验证和上面一样{$("#pas1Tip").html("密码不能为空且只能为英文或者数字");}else{$("#pas1Tip").html("输入正确");}});$("#pas2").blur(function(){//用户密码确认框失去焦点触发验证事件if(!$(this).val || $(this).val() != $("#pas1").val() )//此处验证和上面一样{$("#pas2Tip").html("密码为空或者和上面的密码不致");}else{$("#pas2Tip").html("输入正确");}});$("input[name=ustype]").click(function(){var ustype = $(this).val();var ustypemsg = (ustype==1)?'企业':'个人';$("#ustypeTip").html("您选择的是"+ustypemsg+'会员');});})</script><form action="#">用户名：<inputtype="text" id="name" /><span id="nameTip"></span>密码：<input type="password" id="pas1" /><span id="pas1Tip"></span> 确认密码：<input type="password" id="pas2" /><span id="pas2Tip"></span> 用户类型：<input type="radio" value="0" name="ustype"checked="checked" /> 个人<input type="radio" value="1" name="ustype" /> 企业 <spanid="ustypeTip"></span><input type="submit" value="提交" /></form>=====================================1. <script src="http:///wp-content/themes/decoder/lib/js/jquery-1.2.6.min.js"></script>2. <script type="text/javascript">3.4. $(function(){5. $('#name').blur(function(){$('#nameT').html($(this).attr('value') == '' ? "<strong style='color:#f00;'>×名字不能为空</strong>" : "<strong style='color:#62842b;'>×输入正确</strong>");});6. $('#pas1').blur(function(){$('#pas1T').html($(this).attr('value') == '' ? "<strong style='color:#f00;'>×密码不能为空</strong>" : "<strong style='color:#62842b;'>×输入正确</strong>");});7. $('#pas2').blur(function(){$('#pas2T').html($(this).attr('value') != $("#pas1").attr('value') ? "<strong style='color:#f00;'>×确认密码不正确</strong>" : "<strong style='color:#62842b;'>×输入正确</ strong>");});8. $("input[name=ustype]").click(function(){9. var ustype = $(this).attr('value');10. var ustypemsg = (ustype==1)?'企业':'个人';11. $("#ustypeT").html("您选择的是"+ustypemsg+'会员');12. });13. });14.15. </script>16. <form action="">17. 用户名：<input type="text" id="name" /><span id="nameT"></span>18. 密码：<input type="password" id="pas1" /><span id="pas1T"></span>19. 确认密码：<input type="password" id="pas2" /><span id="pas2T"></span>20. 用户类型：<input type="radio" value="0" name="ustype" checked="checked" /> 个人<inputtype="radio" value="1" name="ustype" /> 企业<span id="ustypeT"></span>21. <input type="submit" value="提交" />22. </form>代码我就大体解释一下：$(function(){ });是函数是一对出现$('#name').blur(function(){ });这个是当id为name的输入框失去焦点时的事件$(this).attr('value') == '' 判断这个id的值是否为空$('#pas2T').html( );给id为pas2 的标内赋予html样式简单吧。

弄完这个。

jquery大体的架构你应该和我一样也明白了吧。

o(∩_∩)o...Jquery表单验证插件（转）Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。

1、JQuery框架软件包下载地址/blog/upfile/070808202257.rar2、Form插件下载地址/blog/upfile/070808202313.rarForm插件的简单入门3、Form插件的详细使用方法及应用实例/jquery/form/＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝表单插件API英文原文：/jquery/form/#api表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。

合集下载

clearvalidate的用法

clearvalidate的用法

clearvalidate的用法在前端开发中，表单验证是不可避免的一个流程，因为表单的数据需要被正确的验证后才会进行下一步的操作。

在表单验证过程中，经常会遇到需要清除验证状态的情况，这时就需要使用clearValidate 方法来清除验证状态。

那么，下面就来详细介绍一下clearValidate 方法的用法。

1. 什么是 clearValidate 方法？clearValidate 方法是 JQuery Validation 插件提供的一种方法，用于清除表单验证状态的方法。

在使用 clearValidate 方法后，表单验证状态将恢复到初始状态，就像没有进行过验证一样。

2. clearValidate 方法的用途clearValidate 方法的主要用途是用于清除表单验证状态。

当表单中的数据已经被验证通过或者验证不通过时，我们可能需要重置表单，并清除表单验证状态，以便下一次再进行正确的验证。

3. clearValidate 方法的语法clearValidate 方法的语法如下：$(form_selector).validate().resetForm();其中，form_selector 表示需要进行清除验证状态的表单的选择器。

这个选择器可以是表单的 ID、class 或者是标签名。

4. clearValidate 方法的使用示例下面以实际的代码为例，来看一下 clearValidate 方法的使用：HTML 代码：<form id="myform" action="..." method="..." ><input name="username" required><button id="resetBtn" type="button">重置表单</button></form>JS 代码：$(function(){//进行表单验证$("#myform").validate();//为“重置表单”按钮添加单击事件$("#resetBtn").click(function(){//清除表单验证状态$("#myform").validate().resetForm();});});在这个代码中，我们首先使用了 jQuery Validation 插件对表单进行了验证，并为“重置表单”按钮添加了单击事件。

bootstrap表单验证使用方法

bootstrap表单验证使用方法

bootstrap表单验证使⽤⽅法前⾔：做Web开发的我们，表单验证是再常见不过的需求了。

友好的错误提⽰能增加⽤户体验。

博主搜索bootstrap表单验证，搜到的结果⼤部分都是⽂中的主题：bootstrapvalidator。

今天就来看看它如何使⽤吧。

⼀、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。

⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。

从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。

我们⾸先引⼊需要的js组件<script src="~/Scripts/jquery-1.10.2.js"></script><script src="~/Content/bootstrap/js/bootstrap.min.js"></script><link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" /><script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script><link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />我们知道，既然是表单验证，那么我们在cshtml页⾯就必须要有⼀个Form，并且我们知道Form⾥⾯取元素都是通过name属性去取值的，所以，表单⾥⾯的元素都要有⼀个name的属性值。

jquery validate和validform验证插件的对比

jquery validate和validform验证插件的对比

此文在jquery的验证插件（下文以jquery代替）和validform验证插件之间作如下对比：1、样式2、普通验证：3、自定义验证：4、Ajax验证：一、样式1、Jquery（可自定义提示信息样式，下图摘自官方文档）：2、Validform（提供七种内置方案并支持自定义，以下为七种内置的较常用的三种）：二、普通验证1、Jquery：Jquery支持两种方式验证：1、直接将规则绑定到元素上。

2、将规则写在初始化js 中1、直接将规则绑定到元素上。

<form class="cmxform" id="form2" method="get" action=""><fieldset><legend>验证一个完整的表单</legend><p><label for="email">Email</label><input id="email" name="email" required type="email"></p><p><label for="agree">喜欢的颜色</label><select id="color" name="color" title="请选择您喜欢的颜色！" required><option></option><option>红色</option><option>蓝色</option><option>黄色</option></select></p><p><label for="phone">电话</label><input id="phone" name="phone" required type="number" rangelength="[2,8]"> </p><p><label for="address">地址</label><input id="address" name="address" required minlength="3"></p><p><label for="avatar">头像</label><input type="file" id="avatar" name="avatar" required></p><p><label for="agree">请同意我们的条款</label><input type="checkbox" class="checkbox" id="agree" title="请同意我们的条款！" name="agree" required></p><p><input class="submit" type="submit" value="提交"/><input class="cancel" type="submit" value="取消"/></p></fieldset></form>2、将规则下载初始化js中$().ready(function() {$("#signupForm").validate({rules: {firstname: "required",email: {required: true,email: true},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"}},messages: {firstname: "请输入姓名",email: {required: "请输入Email地址",email: "请输入正确的email地址"},password: {required: "请输入密码",minlength: jQuery.format("密码不能小于{0}个字符")},confirm_password: {required: "请输入确认密码",minlength: "确认密码不能小于5个字符",equalTo: "两次输入密码不一致不一致"}}});});2、Validform：Validform也支持两种：1、直接将规则绑定到元素上。

jQuery formValidator使用说明

jQuery formValidator使用说明

jQuery formValidator使用说明说明：jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js 脚本于页面的分离。

对一个表单对象，你只需要写一行代码就可以轻松实现20种以上的脚本控制。

现支持一个表单元素累加很多种校验方式,采用配置信息的思想，而不是把信息写在表单元素上，能比较完美的实现ajax请求。

并结合jquery.boxy实现遮罩提示。

一、所需元素jquery-1.3.2.js （需要jquery-1.3.2以上版本）formValidator.js （表单验证基础js）formValidatorRegex.js （表单验证所需正则js）jquery.boxy.js （遮罩提示js）validator.css （表单验证样式）boxy.css （遮罩提示样式）二、使用说明a)使用方法i.加载所需js和css文件ii.初始化验证控件（$.formValidator.initConfig({formid:"form1",onerror:function(msg){Boxy.alert("<center>"+msg+"</center>",null,{title:"提示信息"});}});）iii.表单验证（$("#nl").formValidator({onshow:"请输入的年龄（1-99岁之间）",onfocus:"只能输入1-99之间的数字哦",oncorrect:"恭喜你,你输对了"}).inputValidator({min:1,max:99,type:"value",onerrormin:"你输入的值必须大于等于1",onerror:"年龄必须在1-99之间，请确认"}).defaultPassed();});）b)参数说明：i.初始化验证控件：initConfig1.Formid （form 表单 id）2.Debug （是否使用debug模式，默认false）3.Validatorgroup （验证表单分组）4.Alertmsg （alert输出提示信息，默认false）5.Boxyalertmsg （boxy.alert输出提示信息，默认false）6.Validobjectids （多个表单id，用“,”分隔）7.Onsuccess （成功时回调涵数）8.Onerror （失败时回调涵数）9.Submitonce （是否提交表单，默认false）10.Autotip （是否使用自动验证提示，默认false）ii.表单验证验证方式有如下几种1.formValidator （基础验证）初始参数：validatorgroup : "1",empty :false,submitonce : false,automodify : false,onshow :"请输入内容",onfocus: "请输入内容",oncorrect: "输入正确",onempty: "输入内容为空",defaultvalue : null,bind : true,validatetype : "InitValidator",tipcss :{"left" : "10px","top" : "1px","height" : "20px","width":"250px"},triggerevent:"blur"2.inputValidator (input验证)初始参数:isvalid : false,min : 0,max : 99999999999999,type : "size",onerror:"输入错误",validatetype:"InputValidator",empty:{leftempty:true,rightempty:true,leftemptyerror:nu ll,rightemptyerror:null}pareValidator （比较验证）初始参数：isvalid : false,desid : "",operateor :"=",onerror:"输入错误",validatetype:"CompareValidator"4.ajaxValidator (ajax验证)初始参数：isvalid : false,lastValid : "",type : "GET",url : "",addidvalue : true,datatype : "html",data : "",async : true,cache : false,beforesend : function(){return true;},success : function(){return true;},complete : function(){},processdata : true,error : function(){},buttons : null,onerror:"服务器校验没有通过",onwait:"正在等待服务器返回数据",validatetype:"AjaxValidator"5.regexValidator （正则验证）初始参数：isvalid : false,regexp : "",param : "i",datatype : "string",onerror:"输入的格式不正确",validatetype:"RegexValidator"三、注意事项formValidatorRegex.js方便扩展，可把常用的正则加入这个文件。