我原本使用在input中的onblur判断“密码”和“确认密码”是否一致,然而我发现它有时可以有时不行,原因不明,后来了解到jquery-validate这个框架,决定用它试一试,这是我在网上找的实例:
http://blog.csdn.net/qq_19558...
结果我这边只能判断有没有填写,并不能做出更进一步的判断,按上面那个实例,输入密码的时候如果位数不够会直接有提示。我在怎么折腾都没用后试着直接复制他的“注册”代码,然而却什么都显示不了。
现在我复原回我之前写的,恳请各位大佬帮忙看看到底是什么问题。谢谢各位!
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>注册</title>
<style>
#registerDev {
margin-top: 100px;
}
</style>
<!-- 引入Bootstrap和jquery -->
<link rel="stylesheet" href="/templates/bootstrap/css/bootstrap.min.css">
<script src="/templates/bootstrap/jquery-3.2.1.min.js"></script>
<script src="/templates/bootstrap/js/bootstrap.min.js"></script>
<!-- 引入表单验证的框架 -->
<script type="text/javascript" src="/jslib/jquery.validate.min.js"></script>
<script type="text/javascript" src="/jslib/messages.js"></script>
</head>
<body>
<div class="container">
<div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2" id="registerDev">
<form class="form" id="register_form" action="/index/index/register">
<fieldset>
<h2 align="center">欢迎加入</h2>
<div class="form-group">
<input type="text" id="userName" class="form-control" placeholder="请输入用户名" required="" autofocus="">
</div>
<div class="form-group">
<input type="password" id="password" class="form-control" placeholder="请输入密码" required="">
</div>
<div class="form-group">
<input type="password" id="comfirmPassword" class="form-control" placeholder="请再次输入密码" required="true" >
</div>
<div class="form-group">
<input type="text" id="realName" class="form-control" placeholder="请输入真实姓名" required="">
</div>
<div class="form-group">
<input type="text" id="studentid" class="form-control" placeholder="请输入学号" required="">
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit" >注册</button>
</div>
</fieldset>
</form>
<!--判断密码与再次输入是否一致-->
</div>
</div>
</body>
<script type="text/javascript" src="check.js">
$().ready(function check() {
//网友提醒后这里补上引号,然而还是没想要的效果
$(#"register_form").validate({
rules:{
userName:"required",
password:{
required:true,
minlength:8
},
comfirmPassword:{
required:true,
equalTo:"#password"
},
realName:{
required:true,
minlength:2,
maxlength:10
}
studentid:{
required:true,
digits:true,
maxlength:12,
minlength:12
}
},
messages:{
userName:"请输入用户名",
password:{
required:"请输入密码",
minlength:"密码长度不少于8位"
},
comfirmPassword:{
required:"请再次输入密码",
equalTo:"请输入与上面相同的密码"
},
realName:{
required:"请输入姓名",
minlength:"姓名最小长度为2",
maxlength:"您的名字真这么长的话请与管理员联系"
},
studentid:{
required:"请输入学号",
digits:"请输入数字",
maxlength:"学号长度为12位",
minlength:"学号长度为12位"
}
}
});
})
</script>
</html>
图片:
"register_form"改成"#register_form"