jquery.validate和jquery.form.js实现表单提交

jquery.validate和MyAjaxForm.js实现表单提交

 .error
        {
            color: red;
        }

首先要引入JS库：

<script src="http://www.cnblogs.com/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/MyAjaxForm.js" type="text/javascript"></script>

<script type="text/javascript">
        var validator;
        $(function () {

            //远程校验用户名是否存在：demo
            //blur：只是监听文本框的失去焦点的事件
            //change:在失去焦点的时候判断文本是否改变，改变就触发此事件
            //            $("#txtName").change(function () {
            //                $("#errormsg").text("");
            //                //把当前的用户名发送到后台，进行校验是否存在
            //                $.get("http://www.cnblogs.com/Base/CheckUserNameIsExist.ashx", "txtName=" + $(this).val(), function (data) {
            //                    if (data == 'true') {
            //                        //告诉用户：当前用户名已经存在
            //                        $("#errormsg").text("*user is exist");
            //                    }
            //                });
            //            });

validateFrm(); bindFrmSub();

});

//绑定整个表单的提交bindFrmSub(); 
        function bindFrmSub() {
            $("#btnSub").click(function () {
                //校验一下，当表单提交之前先校验是否通过，如果通过在异步的提交到后台
                if(validator.form()) {
                    //使用插件直接将表单整体提交到后台
                    $("#frmSubUser").ajaxSubmit({
                        success: function (str) {
                            if (str == 'ok') {
                                window.location = "BuildingList.htm";
                            } else {
                                alert("注册失败！");
                            }
                        },
                        error: function (error) { alert(error); },
                        url: 'Regist.ashx', /*设置post提交到的页面*/
                        type: "post" /*设置表单以post方法提交*/
                        //dataType: "json" /*设置返回值类型为文本*/
                    });
                }               
            });
            return false;

//校验整个表单validateFrm(); 
        function validateFrm() {
            //下面就是我们当前页面的JQ  校验规则
            validator = $("#frmSubUser").validate({
                rules: {
                    txtName: {
                        remote: "http://www.cnblogs.com/Base/CheckUserNameIsExist.ashx"
                    //required: true,
                    //minlength: 4
                    },
                    txtPwd: {
                        required: true,
                        rangelength: [5, 10]

                    },
                    txtMail: {
                        required: true,
                        email: true //邮箱格式为true
                    },
                    txtPwd2: {
                        equalTo: "#txtPwd"
                    }
                },
                messages: {
                    txtName: "*",
                    txtPwd: {
                        required: "*必填",
                        rangelength: "*只能是5-10个字符"
                    },
                    txtMail: "*必填邮箱格式",
                    txtPwd2: "*两次密码要一致"
                }
            });
            //处理邮箱的校验
            //最基本的通过自己手写 js 可以控制校验（最基本的方式）
            $("#txtMail").change(function () {
                var mailTxt = $(this).val();
                //是否是邮箱：正则表达式,失去焦点就会校验
                //js:
                //一般情况下将校验的逻辑封装到一个scirpt文件里面去。使用的时候引用一下脚本就行了，不用
                //在每个表单的页面都重复写校验的逻辑了
                //dry
                //jq validate
            });
        }

 </script>

 　　　<tr>

         <td>
                用户名：
            </td>
            <td>
                <input type="text" value="" name="txtName" id="txtName" /><span style="color: red;"
                    id="errormsg"></span>
            </td>
        </tr>

 span显示用户已存在

顶

Top

关注