87,993
社区成员
发帖
与我相关
我的任务
分享jQuery validate
<!DOCTYPE html>
<html>
<head>
<title>管理员注册</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="../../lib/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../../dist/jquery.validate.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header">
<div class="alert alert-info" role="alert">
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">填写如下信息</h3>
</div>
<div class="panel-body">
<form id="signupForm" method="post" class="form-horizontal" action="">
<div class="form-group">
<label class="col-sm-4 control-label" for="username">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="username" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="lastname">学号</label>
<div class="col-sm-5">
<input type="number" class="form-control" id="number" name="number" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="tel">手机号</label>
<div class="col-sm-5">
<input type="tel" class="form-control" id="tel" name="tel" placeholder="" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="email">电子邮箱</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="email" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="password">密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="password" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="confirm_password">确认密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="confirm_password" name="confirm_password" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-4">
<div class="checkbox">
<label>
<input type="checkbox" id="agree" name="agree" value="agree" />我已阅读并同意协议
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-4">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">注册</button>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$.validator.setDefaults( {
submitHandler: function () {
alert( "submitted!" );
}
} );
$( document ).ready( function () {
$( "#signupForm" ).validate( {
rules: {
username: {
required:true,
rangelength:[6,20]
},
number:{
required: true,
rangelength:[7,7]
},
tel: {
required: true,
minlength: 11,
maxlength: 11
},
password: {
required: true,
minlength: 6,
maxlength: 20
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
username: {
required:"请填写用户名",
rangelength:"长度为6-20位"
}
number: {
required:"请输入学号",
rangelength:"学号必须为7位"
}
tel: {
required: "请输入电话号码",
minlength: "电话号码必须是11位",
maxlength: "电话号码必须是11位"
},
password: {
required: "请输入密码",
minlength: "密码至少为6位",
maxlength: "密码最大长度不能超过20位"
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码至少为6位",
equalTo: "两次密码输入必须一致"
},
email: "请填写合法的邮箱地址",
agree: "必须同意许可协议才能注册"
},
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-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
},
unhighlight: function (element, errorClass, validClass) {
$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
}
} );
} );
</script>
</body>
</html>
求大神看看错误
...全文
请发表友善的回复…
发表回复
