`
kiddsunhaibo1
  • 浏览: 98295 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jQuery validate form 表单的验证

    博客分类:
  • web
阅读更多
利用jQuery中的validate的控件进行表单的验证,导入jquery.validate.js,jquery.js这两个js,附上如下的代码,你懂的:

$().ready(function() {
$("#firstform").validate();

$("#secondform").validate({

rules:{
xm:{
required: true,
minlength: 2,
maxlength: 5
},
pwd:{
required: true,
minlength: 6
},
confirm_pwd:{
required: true,
equalTo: "#pwd"
},
f2csrq:{
required: true,
date: true
},
f2xjzd: {
required: true
},
f2sfzh:{
/*digits: true,
rangelength: [18,20]*/
required: true,
isIdCardNo: true
}
},
messages:{
xm:{
required: "请填写姓名",
minlength: "字符长度不能小于2个字符",
maxlength: "字符长度不能大于5个字符"
},
pwd:{
required: "请填写密码",
minlength: "字符长度不能小于6个字符"
},
confirm_pwd:{
required: "请再次输入密码",
equalTo: "密码不一致"
},
f2csrq:{
required: "请输入出生日期",
date: "日期格式不正确(例:2009/04/07)"
},
f2xjzd:{
required: "请输入地址"
},
f2sfzh:{
/*digits: "身份证号码只能为数字",
rangelength: "身份号码长度为18~20个字符"*/
required: "请输入身份证号",
isIdCardNo: "身份证号不正确"
}
}
});


<form id="secondform">   
    <fieldset>
    <legend>自定义jQuery验证</legend>
        <div id="xm" class="owinput">
<div class="owlabel">
            <label class="req" for="xm"> 姓  名 :</label>
            </div>
<div class="owfield">
<span class="inp"> <input name="xm" type="text"> </span>
</div>
        </div>
       
        <div id="xb" class="owinput">
<div class="owlabel">
            <label class="req" for="pwd"> 密  码 :</label>
            </div>
<div class="owfield">
<span class="inp"> <input id="pwd" name="pwd" type="text"> </span>
</div>
        </div>
       
        <div id="xb" class="owinput">
<div class="owlabel">
            <label class="req" for="confirm_pwd"> 密码确认 :</label>
            </div>
            <div class="owfield">
<span class="inp"> <input name="confirm_pwd" type="text"> </span>
</div>
        </div>
       
        <div id="csrq" class="owinput">
<div class="owlabel">
            <label class="req" for="f2csrq"> 出生日期 :</label>
            </div>
<div class="owfield">
<span class="inp"> <input name="f2csrq" type="text"> </span>
</div>
        </div>
       
        <div id="xjzd" class="owinput">
<div class="owlabel">
            <label class="req" for="f2xjzd"> 现居住地 :</label>
            </div>
<div class="owfield">
<span class="inp"> <input value="" name="f2xjzd" type="text"> </span>
</div>
        </div>
       
        <div id="sfzh" class="owinput">
<div class="owlabel">
            <label class="req" for="f2sfzh"> 身份证号 :</label>
            </div>
<div class="owfield">
<span class="inp"> <input name="f2sfzh" type="text"> </span>
</div>
        </div>  
    </fieldset>
    <div id="messageBox"></div>
    <div id="regSubmit">
        <span id="btnCreate" class="regBtn" onmouseover="btncreatehover(this);" onmouseout="btncreateout(this);">
            <b class="tl"><b class="tr"></b></b><button id="send" type="submit">提  交</button><b class="bl"><b class="br"></b></b>
        </span>
        <span id="btnCancel" class="cancelBtn" onmouseover="btncancelhover(this);" onmouseout="btncancelout(this);">
            <b class="tl"><b class="tr"></b></b><button id="cancelBtn" type="button">取  消</button><b class="bl"><b class="br"></b></b>
        </span>
    </div>
</form>

在form表单提交的时候可以通过
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
alert("submitted!"); }
});
来实现请求的发送
分享到:
评论

相关推荐

    jquery validate 表单验证

    以上就是jQuery Validate的基本使用和核心概念,通过熟练掌握这些,你可以轻松实现高效且用户友好的表单验证。记住,始终要关注用户体验,避免过于繁琐的验证过程,同时确保数据安全性和准确性。

    jQuery Validate表单验证插件

    jQuery Validate是一个广泛使用的JavaScript库,专门用于前端表单验证。这个插件极大地方便了开发者在用户提交数据之前检查输入的正确性和完整性,确保数据的质量和安全性。在本文中,我们将深入探讨jQuery Validate...

    Jquery validate和form插件

    `jQuery validate` 和 `jQuery form` 插件是 jQuery 生态系统中的两个重要工具,它们分别用于增强表单验证和实现 AJAX 无刷新提交,从而提供更流畅的用户体验。 **jQuery validate 插件** `jQuery validate` 是一...

    jquery validate表单验证插件制作注册表单提交验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...

    jquery validate表单验证插件手机注册表单验证代码

    jQuery Validate插件作为一款强大的JavaScript验证工具,广泛应用于各种表单验证场景,包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法,以及如何将其应用于手机注册表单的验证。 一、jQuery ...

    jQuery validate 表单验证源码

    在"jQuery validate 表单验证源码"中,我们可以看到几个不同的示例页面,如AutoPromtingValidate.aspx、FormValidate.aspx、TruthValidate.aspx、ValidateShowAlert.aspx和GrounpValidate.aspx。这些页面展示了不同...

    jquery.validate表单验证框架详解

    ### jQuery.validate 表单验证框架详解 在现代Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而提高用户体验并减少服务器端的压力。jQuery.validate插件便是为此而生,它提供了丰富的...

    extend jquery validate myValidate 表单验证

    在你提供的标题“extend jQuery validate myValidate 表单验证”中,我们可以推测你可能在尝试扩展默认的jQuery Validate功能,创建一个名为"myValidate"的自定义验证方法。扩展jQuery Validate库是常见的需求,以便...

    jQuery Validate插件验证表单小练

    jQuery Validate 插件是Web开发中广泛使用的工具,主要用于实现前端表单验证,它极大地简化了用户输入数据的检查过程,提供了丰富的验证规则和自定义方法。在这个“jQuery Validate插件验证表单小练”中,我们将深入...

    jquery validate表单验证js

    《jQuery Validate表单验证插件详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的JavaScript库,它使得在...

    jquery表单验证实例,对数字,字数,必填项等校验

    `jQuery Validate`是基于`jQuery`的一个插件,专门用于实现客户端的表单验证,它可以高效且易于地实现对数字、字数、必填项等各种类型的验证。 在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,...

    jQuery validate框架的个性化验证

    jQuery Validate 提供了一些事件和回调函数,如 `submitHandler`(表单验证成功后的回调)、`invalidHandler`(验证失败的回调)等,可以进一步增强用户体验。 7. **美化样式** `errorPlacement` 和 `highlight/...

    jQuery Validate表单验证深入学习

    jQuery Validate插件是前端开发中用于表单验证的常用JavaScript库,它能够方便地集成到jQuery项目中,并提供了一套丰富的验证规则和方法。通过该插件,开发者可以快速实现对表单输入数据的验证,确保数据的准确性和...

    jquery validate 验证自定义样式

    7. **自定义提交按钮**:如果你希望在表单验证失败时禁用提交按钮,可以使用`submitHandler`回调函数: ```javascript submitHandler: function(form) { // 提交表单前的逻辑,如发送AJAX请求 form.submit(); }...

    jquery-validate 表单验证

    `jQuery Validate` 是一个强大的 JavaScript 库,专为 jQuery 框架设计,用于实现高效、灵活且易于使用的表单验证。它可以帮助开发者创建各种复杂的验证规则,确保用户输入的数据符合预设的要求,从而提高网站的安全...

    高质量的jQuery 表单验证插件 Validate Form

    jQuery库为我们提供了便捷的方式来处理DOM操作,同时,jQuery Validate Form插件进一步简化了表单验证的过程,提高了开发效率。下面将详细介绍这个高质量的jQuery插件及其主要功能。 ### 一、jQuery Validate Form...

    jquery的form表单验证

    jQuery的form表单验证不仅提供了丰富的预设规则,还允许灵活的自定义,使得开发者可以轻松地实现各种复杂的验证逻辑,提升用户体验并确保数据质量。结合实际的业务场景,合理运用这些验证方法和规则,可以构建出...

    jquery validate表单验证插件制作会员信息注册表单验

    总的来说,jQuery Validate插件为开发者提供了一种简单、灵活的方式来处理表单验证,大大简化了前端验证的复杂度,使得会员信息注册表单的验证变得更加容易。通过合理配置,我们可以确保用户输入的数据符合我们的...

    jquery validate表单验证插件制作注册表单验证提交

    总的来说,jQuery Validate插件提供了强大的表单验证功能,可以帮助开发者轻松创建出符合业务需求的注册表单。结合其丰富的验证规则、自定义方法和异步验证,能够极大地提高表单的用户体验。在实际项目中,根据具体...

    jquery validate 信息气泡提示

    总之,通过 jQuery Validate 和 PoshyTip 的结合,我们可以构建一个功能强大且用户体验良好的表单验证系统,有效地提示用户修正错误,提高表单填写的准确性。同时,PoshyTip 提供的丰富配置选项使得提示信息的样式和...

Global site tag (gtag.js) - Google Analytics