表单验证

来源:互联网 发布:苹果mac如何格式化u盘 编辑:程序博客网 时间:2024/06/05 11:03
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(function(){
//添加必填项区别
$("form :input.required").each(function(){
var $required = $("<font color='red'>*</font>");
$(this).parent().append($required);
});
$("form :input").blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if($(this).is("#userName")){
if(this.value == "" || this.value.length <6){
var errorMsg = "请输入至少6位的用户名";
$parent.append("<span class='formtips onError'>" +errorMsg + "</span>");
}else{
var okMsg = "输入正确";
$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value == "" || (this.value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
var errorMsg = "请输入正确的E-Mail地址."
$parent.append("<span class='formtips onError'>" + errorMsg + "</span>");
}else{
var okMsg = "输入正确";
$parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
}
}
}).keyup(function(){
//使用triggerHandler可以只触发元素绑定的blur事件,而不是触发浏览器默认的blur事件。
$(this).triggerHandler("blur");
}).focus(function(){
//使用triggerHandler可以只触发元素绑定的blur事件,而不是触发浏览器默认的blur事件。
$(this).triggerHandler("blur");
});
//最终提交
$("#send").click(function(){
$("form .required:input").trigger("blur");
var numError = $("form .onError").length;
if(numError){
return false;
}
alert("注册成功,密码已经发送到您的邮箱,请查收");
});
})
</script>


<body>
<form action="#" method="post">
<div>
用户名:<input type="text" id="userName" class="required" />
</div>
<div>
邮  箱:<input type="text" id="email" class="required" />
</div>
<div>
个人资料:<input type="text" id="personinfo" />
</div>
<div>
<input type="submit" id="send" value="确定" />
</div>
</form>
</body>
原创粉丝点击