jquery校验表单

来源:互联网 发布:unity3d模型百度云 编辑:程序博客网 时间:2024/05/17 23:18
<script>
    $().ready(function() {


        $.validator.addMethod("isEmail",function(value,element){


            return this.optional(element) || /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value);


        },"请输入正确的邮箱格式");


        // 手机号码校验方法
        $.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
        }, "请输入正确的手机号码");


        // 在键盘按下并释放及提交后验证提交表单
        $("#addUser").validate({
            rules: {
                phoneNo : {
                    required : true,
                    isMobile : $("#modifyPhoneNo").val()
                },
                operatorAccount : "required",
                operatorName : "required",
                email : {
                    required : true,
                    isEmail : $("#modifyEmail").val()
                },
                operatorPassword : {
                    required : true,
                    isPassword : $("#password").val()
                } ,
                checkPassword : {
                    required :true,
                    equalTo: "#modifyOperatorPassword"
                }
            }
        })
    });
</script>
#parse("common/header.vm")
<div class="main-container" id="main-container">
<script type="text/javascript">
try{ace.settings.check('main-container' , 'fixed')}catch(e){}
</script>
<div class="main-container-inner">
#parse("common/leftbarOutLine.vm")
<div class="main-content">
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
</script>
<ul class="breadcrumb">
<li>
<i class="icon-home home-icon"></i>
                        <a href="/">主页</a>
</li>
                    <li>
                        运维用户管理
                    </li>
                    <li class="active">添加运维用户</li>
</ul><!-- .breadcrumb -->
</div>
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<form class="form-horizontal" role="form" id="addUser" action="/rest/userManage/saveUser">
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="operatorAccount"> 登录名 </label>
<div class="col-sm-9">
<input type="text" id="modifyOperatorAccount" name="operatorAccount"  class="col-xs-10 col-sm-5" />
                                <span id="modifyOperatorAccountInfo" class="error" style="font-size:14px;"></span>
                            </div>
</div>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="operatorName"> 用户姓名 </label>
<div class="col-sm-9">
<input type="text" id="modifyOperatorName" name="operatorName"  class="col-xs-10 col-sm-5"   />
</div>
</div>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="operatorPassword"> 运维密码 </label>
<div class="col-sm-9">
<input type="password" id="modifyOperatorPassword" name="operatorPassword"  class="col-xs-10 col-sm-5"   />
</div>
</div>
                            <div class="space-4"></div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label no-padding-right" for="operatorPassword">
                                    确认密码 </label>
                                <div class="col-sm-9">
                                    <input type="password" id="checkPassword" name="checkPassword"
                                           class="col-xs-10 col-sm-5"/>
                                </div>
                            </div>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="roleId"> 手机号 </label>
<div class="col-sm-9">
<input type="text" id="modifyPhoneNo" name="phoneNo"  class="col-xs-10 col-sm-5"   />
</div>
</div>
<div class="space-4"></div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right" for="phoneNo"> 邮件 </label>
<div class="col-sm-9">
<input type="text" id="modifyEmail" name="email"  class="col-xs-10 col-sm-5"   />
</div>
</div>
<div class="space-4"></div>
                            <div class="form-group">
                                <div class="col-md-offset-3 col-md-9">
                                    <div class="col-md-offset-3 col-md-9" >
                                        <button id="submitBtn" type="button" class="btn btn-primary btn-sm">
                                            <i class="icon-save icon-on-right bigger-110"></i>提交
                                        </button>
                                        <button id="rebackQuery" type="button" class="btn btn-default btn-sm"  onclick="winclose();" >
                                            <i class="icon-remove icon-on-right bigger-110"></i>关闭
                                        </button>
                                    </div>
                                </div>
                            </div>
</form>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div><!-- /.main-content -->
</div><!-- /.main-container-inner -->
</div><!-- /.main-container -->
<script>
$(function(){
jQuery("#submitBtn").bind("click", function(){
            $("#addUser").submit();
});

if ("$!{MSG}" != "") {
if ("$!{MSG}" == "SUCCESS") {
window.close();
} else {
alert("$!{MSG}");
}
}
});
    //关闭
    function  winclose() {
        location.href="/rest/userManage/queryUserList";
    }


    //检查用户名是否重复
    $('#modifyOperatorAccount').blur(function(){
            $('#modifyOperatorAccount').next().html("");
            var operatorAccount = $.trim($("#modifyOperatorAccount").val());
            var json = { "operatorAccount": operatorAccount };
            $.ajax({
                type:"POST",
                url:"/rest/userManage/checkUserAccount",
                contentType:"application/json",
                dataType:"html json",
                data:"operatorAccount="+operatorAccount,
                success:function (data) {
                    if(data.success == false){
                        $("#modifyOperatorAccountInfo").text("登录名重复");
                        $("#submitBtn").attr("disabled", true);
                    }else{
                        $("#submitBtn").attr("disabled", false);
                    }
                }
            })
    });
</script>
<style>
    .error{
        color:red;
    }
    #operatorPassword-error{
        margin-left: 200px;
    }
    #operatorPasswordConfirm-error{
        margin-left: 200px;
    }
</style>
原创粉丝点击