首页 > 代码库 > 有关Jquery Validator的使用

有关Jquery Validator的使用

2024-07-10 19:13:42   221人阅读

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplication1.index" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--css,可以改动的，根据从www.jquery.com上面下载的插件改动的-->
    <link href=http://www.mamicode.com/"css/screen.css" rel="stylesheet" type="text/css" />
    <script src=http://www.mamicode.com/"lib/jquery.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"dist/jquery.validate.min.js" type="text/javascript"></script>
    <!--信息汉化-->
    <script src=http://www.mamicode.com/"src/localization/messages_zh.js" type="text/javascript"></script>
    <style type="text/css">
        .style1
        {
            width: 50%; border:1px solid #cccccc; border-collapse:collapse; font-size:12px;
        }
        .style1 td{ border:1px solid #cccccc; height:25px; }
        input{ border:1px solid #cccccc; height:20px;}
        #Select1
        {
            height: 20px;
            width: 150px;
        }
      .success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
        }
    </style>
    <script type="text/javascript">
        //自定义方法
        //addMethod("验证方法名")
        $.validator.addMethod("checkHometown", function (value, element) {
            return value =http://www.mamicode.com/= "请选择籍贯" ? false : true;
        }, "请选择籍贯");
        //验证手机号码的自定义方法
        $.validator.addMethod("checkMobile", function (value, element) {
            var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/; //手机号码正则
            if (myreg.test(value)) {
                return true;
            }
            else {
                return false;
            }


        }, "手机格式不对");


        $(function () {
           
            $("#signupForm1").validate({
                rules: {
                    uname: { required: true, minlength: 3, maxlength: 10,
                        remote: "check_user_exists.ashx"   //调用ajax使用一般处理程序，做用户验证，参数自己帮你传了，一般是参数名(控件名)=值
                    },
                    password: { required: true, minlength: 3, maxlength: 20 },
                    confirmPassword: { required: true, equalTo: "#password" },
                    homeTown: { checkHometown: true },
                    email: { required: true },
                    mobile: { required: true, checkMobile: true }//checkMobile是上面自己定义的方法
                },
                success: function (label) {
                    label.text(" ").addClass("success"); //验证成功
                },
                messages: {
                    uname: { remote: "用户名不可用" },
                    password: { required: "请输入密码", minlength: "密码长度不少于3个", maxlength: "密码长度不多于20" },
                    confirmPassword: { equalTo: "密码不匹配" }


                },
                submitHandler: function () {
                    alert("添加"); //提交到服务器
                }
            });


        });




    </script>
</head>
<body>
    <form id="signupForm1" runat="server" >
    <h1>验证框架Demo</h1>
    <div>
    
        <table class="style1">
            <tr>
                <td>
                    用户名</td>
                <td>
                    <input id="uname" name="uname" type="text" /></td>
            </tr>
            <tr>
                <td>
                    密码</td>
                <td>
                    <input id="password" name="password" type="password" /></td>
            </tr>
            <tr>
                <td>
                    确认密码</td>
                <td>
                    <input id="confirmPassword" name="confirmPassword" type="password" /></td>
            </tr>
            <tr>
                <td>
                    籍贯</td>
                <td>
                    <select id="homeTown" name="homeTown">
                     <option value=http://www.mamicode.com/"请选择籍贯">请选择籍贯
                        <option value=http://www.mamicode.com/"湖南">湖南
                        <option value=http://www.mamicode.com/"湖北">湖北
                        <option value=http://www.mamicode.com/"江西">江西
                    </select></td>
            </tr>
            <tr>
                <td>
                    Email</td>
                <td>
                    <input id="email" type="email" name="email" /></td>
            </tr>
            <tr>
                <td>
                    手机号码</td>
                <td>
                    <input id="mobile" name="mobile" type="text"/></td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                   <input  type="submit" value=http://www.mamicode.com/"Submit"/>
                   </td>
            </tr>
        </table>
    
    </div>
    
    </form>
</body>

</html>


源代码不知道怎么上传，有需要的可以联系我：31385073@qq.com


联系
我们