用到了blur方法,
当元素失去焦点时发生 blur 事件。
blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码
script代码如下:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("#username").blur(function(){
$("#names").empty();
var name = $(this).val();
if(name=="" || name==null){
$("#username").after("<span id='names' style='color: red'>用户名不能为空</span>");
}
});
$("#email").blur(function(){
$("#emails").empty();
var mail = $(this).val();
if(mail==""|| mail==null){
$("#email").after("<span id='emails' style='color: red'>邮箱不能为空</span>");
}
});
$("#password").blur(function(){
$("#pwds").empty();
var pwd = $(this).val();
if(pwd==""|| pwd==null){
$("#password").after("<span id='pwds' style='color: red'>密码不能为空</span>");
}
});
$("#re-password").blur(function(){
$("#repwds").empty();
var repwd = $(this).val();
var pwd=$("#password").val();
if(repwd==""|| repwd==null){
$("#re-password").after("<span id='repwds' style='color: red'>请确认密码</span>");
}
if(repwd!=pwd){
$("#re-password").after("<span id='repwds' style='color: red'>两次密码不匹配,请重新输入!</span>");
}
});
});
</script>
jsp代码:
<body class="container" ng-app="myApp" ng-controller="controller">
<div class="col-md-3 col-md-offset-3">
<div class="form-group">
<label >username</label>
<input type="text" class="form-control" name="username" id="username">
</div>
<div class="form-group">
<label >email</label>
<input type="text" class="form-control" name="email" id="email">
</div>
<div class="form-group">
<label >password</label>
<input type="password" class="form-control" name="repassword" id="password">
</div>
<div class="form-group">
<label >repassword</label>
<input type="password" class="form-control" name="password" id="re-password">
</div>
<button type="button" class="btn btn-info" id="submit">Submit</button>
</div>
</body>