jquery的validate.js 和 form.js 的使用方法

在使用 Jquery 的方法的验证并且修改 原Form 表单的提交方式的时候,需要引用的文件有

<script type="text/javascript" src="js/jquery-1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>

如下的代码为页面添加了相应的验证和修改了提示信息,并且重写了表单提交的方法和添加自定义的身份证验证方法

jQuery.validator.addMethod("isIDCard", function (value, element) {
    return this.optional(element) || (checkIDCard(value));
}, "请正确填写您的身份证码");

/*-------注册验证-----------*/
$().ready(function () {
    $("#signupForm").validate({
        rules: {
            userName: {
                required: true
            },
            telphone: {
                required: true,
                rangelength: [11, 11],
                digits: "只能输入整数"
            },
            password: {
                required: true,
                rangelength: [8, 16]
            },
            confirm_password: {
                required: true,
                equalTo: "#User_Pwd",
                rangelength: [8, 16]
            },
            IDCard: {
                required: true,
                isIDCard: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            userName: {
                required: "请输入用户名"
            },
            telphone: {
                required: "请输入手机号",
                rangelength: jQuery.format("请输入正确的手机号"),
            },
            password: {
                required: "请输入密码",
                rangelength: jQuery.format("密码在8~16个字符之间"),
            },
            confirm_password: {
                required: "请输入确认密码",
                rangelength: jQuery.format("密码在8~16个字符之间"),
                equalTo: "两次输入密码不一致"
            },
            IDCard: {
                required: "请输入身份证号码",
                isIDCard: "请正确填写您的身份证号码"
            },
            email: {
                required: "请输入邮箱",
                email: "邮箱格式不正确"
            }
        },
        submitHandler: function (form) {
            alert("submitted");
            //$.post("/API/SysMenu/UserMain.ashx", { func: "Register", data: formToJson("#signupForm") }, function (obj) {
            //    if (obj.Status == apiok) {

            //    }
            //}, "json");

            $(form).ajaxSubmit({
                type: "post",
                url: "/API/SysMenu/UserMain.ashx",
                dataType: "json",
                data: { func: "Register", data: formToJson("signupForm") },
                success: function (result) {
                    //返回提示信息
                    alert("ok");
                }
            });

        }
    });
});
 <div class="wrapper">
        <form id="signupForm" class="zcform">
            <p class="clearfix">
                <label class="one" for="userName">用户名:</label>
                <input id="User_Account" name="User_Account" class="myinput required" value="" placeholder="用户名" />
            </p>
            <p class="clearfix">
                <label class="one" for="Phone">手机号码:</label>
                <input id="Phone" name="Phone" class="myinput required" value="18782463597" placeholder="请输入手机号" />
            </p>
            <p class="clearfix">
                <label class="one">校验码:</label>
                <input id="code" class="identifying_code" type="text" placeholder="请输入手机6位校验码" />
                <input class="get_code" type="button" style="color:#fff;" value="获取验证码" />
            </p>
            <p class="clearfix">
                <label class="one" for="User_Pwd">登录密码:</label>
                <input id="User_Pwd" name="User_Pwd" type="password" value="12312312" class="myinput {required:true,rangelength:[8,20],}" placeholder="请输入密码" />
            </p>
            <p class="clearfix">
                <label class="one" for="confirm_password">确认密码:</label>
                <input id="confirm_password" name="confirm_password" type="password" value="12312312" class="myinput {required:true,equalTo:‘#password‘}" placeholder="请再次输入密码" />
            </p>
            <p class="clearfix">
                <label class="one" for="DocumentNum">身份证号:</label>
                <input id="DocumentNum" name="DocumentNum" class="myinput required" value="510922199107300176" placeholder="身份证号" />
            </p>
            <p class="clearfix">
                <label class="one" for="Email">邮箱:</label>
                <input id="Email" name="Email" type="text" class="myinput required" value="[email protected]" placeholder="邮箱" />
            </p>

            <p class="clearfix"><input class="myinput submit" type="submit" value="立即注册" /></p>
            <p class="last"><a href="#">立即登录&gt;</a></p>
        </form>
    </div>
时间: 2024-10-13 04:32:01

jquery的validate.js 和 form.js 的使用方法的相关文章

jQuery.Validate.js在Form标签很多的时候验证速度慢的处理。

最近在项目中有遇到一个Form表单中有200多个标签.在提交表单时网页会出现等待时间很长,甚至会出现网页奔溃的情况. 主要的原因是因为在使用jQuery.Validate.js进行Form验证的时候会花销大量时间.这些时间主要用在两个地方: 1.表单中标签的检查对应jQuery.Validate.js中checkForm()方法. 2.检查完标签后需要显示错误或成功信息对应jQuery.Validate.js中ShowErrors()方法. 先前我们是用的jQuery.Validate.js-1

jquery.form.js(ajax表单提交)

Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquery.form.plugin.html#getting-started 一.准备工作 写一个表单: <form id="reg" action="123.php" method="post"> <p> <label for

jQuery.form.js jQuery ajax异步提交form

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 官网下载地址:http://plugins.jquery.com/form/ API ajaxForm 增加所有需要的事件监听器,为ajax提交表单做准备.ajaxForm并不能提交表单.在document的ready函数中,使用ajaxForm来为ajax提交表单进行准备. 接受0个或1个参数.参数可以是一个回调函数,也可以是一个Options对象. $("#formid").ajaxForm(

jQuery表单插件jquery.form.js

概述 jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程. 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制. 入门指导 一.在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: <form id="myForm" action="login.action&quo

jQuery.form.js使用

jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 下载地址 百度云:http://pan.baidu.com/s/1eQoYE46 360云:http://yunpan.cn/Qi7B5wdiewUMP  访问密码 06b6 微云:http://url.cn/QMQ79w 1 <!DOCTYPE html> 2 3 <html> 4 <head> 5 <meta name="viewport" conte

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields

jquery.form.js 实现异步上传

前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype="multipart/form-data"> <div class="form-horizontal"> <div class="form-group" style="height:100p

jquery.form.js实现异步上传

前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <scri

jquery.form.js用法之清空form的方法

本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用.该段代码言简意赅可以很好的作为学习参考. /** * Clears the form data. Takes the following actions on the form's input fields: * - input text fields will have their 'value' property set to the empty string * - select eleme