利用jquery.validate做手机号验证‘字符验证和一些简单验证

一、js代码

$(function (){
    // 手机号码验证
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        return this.optional(element) || (length == 11 && /^1(3[0-9]|4[57]|5[0-35-9]|8[0-9]|7[07])\d{8}$/.test(value));
    }, "请正确填写您的手机号码。");

    jQuery.validator.addMethod("stringCheck", function(value, element) {
        return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);
    }, "只能包含中文、英文、数字、下划线等字符");
    $('form.form-horizontal').validate({
            rules:{
                //管理员真实姓名
                'administrator.truename':{
                    required:true,
                    rangelength:[2,20],
                    stringCheck:true
                },
                //管理员登陆姓名
                'administrator.nickname':{
                    required:true,
                    rangelength:[2,16],
                },
                //密码
                'administrator.adminpwd':{
                    required:true,
                    minlength:6,
                    maxlength:18
                },
                //确认密码
                'administrator.adminpwdconfirm':{
                    required:true,
                    equalTo:"#administratorpassword"
                },
                //手机号
                'administrator.mobile':{
                    required:true,
                    isMobile:true
                }
            },
            messages:{
                //管理员真实姓名
                'administrator.truename':{
                    required:'真实姓名不得为空',
                    rangelength:'请输入{0}-{1}个字符'
                },
                //管理员登陆姓名
                'administrator.nickname':{
                    required:'登陆姓名不得为空',
                    rangelength:'请输入{0}-{1}个字符'
                },
                //密码
                'administrator.adminpwd':{
                    required:'请输入您的密码',
                    minlength:'密码不得低于{0}位',
                    maxlength:'密码不得超过{0}位'
                },
                //确认密码
                'administrator.adminpwdconfirm':{
                    required:'请确认您输入的密码',
                    equalTo:'两次密码输入不一致'
                },
                //手机号
                'administrator.mobile':{
                    required:'请输入您的手机号',
                }
            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".col-md-6" ).addClass( "has-error" ).removeClass( "has-success" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).parents( ".col-md-6" ).addClass( "has-success" ).removeClass( "has-error" );
            }

        }
    )
})

二、HTML部分代码（用了bootstrap框架）

<form class="form-horizontal" role="form" action="<%=request.getContextPath()%>/admin/administrator/add" method="post">

                    <s:if test="#request.Administrator != null">
                        <input type="hidden" name="administrator.id" class="form-control"
                               value="<s:property value='#request.Administrator.id'/>"/>
                    </s:if>

                    <div class="row">
                        <div class="col-md-8">
                            <s:if test="#request.Administrator == null">
                                <div class="form-group">
                                    <label class="col-md-4 control-label">管理员真实姓名</label>
                                    <div class="col-md-8">
                                        <input type="text" name="administrator.truename" class="form-control"
                                               value="<s:property value='#request.Administrator.truename'/>"/>
                                    </div>
                                </div>
                            </s:if>

                            <div class="form-group">
                                <label class="col-md-4 control-label">管理员登陆姓名</label>
                                <div class="col-md-8">
                                    <input type="text" name="administrator.nickname" class="form-control"
                                           value="<s:property value='#request.Administrator.nickname'/>"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">所属管理组</label>
                                <div class="col-md-8">
                                    <select name="administrator.groupId" class="chosen-select chosen-transparent form-control">
                                        <s:iterator value='#request.AuthGroupArrayList' var="v">
                                            <option value='<s:property value='#v.id'/>'>
                                                <s:property value='#v.name'/>
                                            </option>
                                        </s:iterator>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">密码</label>
                                <div class="col-md-8">
                                    <input type="password" id="administratorpassword" name="administrator.adminpwd" class="form-control"
                                           value=""/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">确认密码</label>
                                <div class="col-md-8">
                                    <input type="password" name="administrator.adminpwdconfirm" class="form-control" value=""/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">手机</label>
                                <div class="col-md-8">
                                    <input type="text" name="administrator.mobile" class="form-control"
                                           value="<s:property value='#request.Administrator.mobile'/>"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">邮箱</label>
                                <div class="col-md-8">
                                    <input type="text" name="administrator.email" class="form-control"
                                           value="<s:property value='#request.Administrator.email'/>"/>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <s:if test="#request.Administrator != null">
                                <!-- tile -->
                                <section class="tile color transparent-black textured">
                                    <!-- tile header -->
                                    <div class="tile-header">
                                        <h1><strong>详细信息</strong></h1>
                                    </div>
                                    <!-- /tile header -->

                                    <!-- tile body -->
                                    <div class="tile-body">
                                        <div class="row">
                                            <div class="col-md-3">真实姓名:</div>
                                            <div class="col-md-9"><s:property value='#request.Administrator.truename'/></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">最后登录IP:</div>
                                            <div class="col-md-9"><s:property value='#request.Administrator.last_login_ip'/></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">最后登录时间:</div>
                                            <div class="col-md-9"><s:date name='#request.Administrator.last_login_time' format="yyyy-MM-DD HH:mm:ss"/></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3">创建时间:</div>
                                            <div class="col-md-9"><s:date name='#request.Administrator.createtime' format="yyyy-MM-DD HH:mm:ss"/></div>
                                        </div>
                                    </div>
                                    <!-- /tile body -->

                                </section>
                                <!-- /tile -->
                            </s:if>
                        </div>

                    </div>

                    <div class="form-group form-footer">
                        <div class="col-md-offset-3 col-md-9">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="reset" class="btn btn-default">Reset</button>
                        </div>
                    </div>

                </form>