简单实现了 验证邮箱格式是否正确,两次输入密码是否一致的功能。每次当鼠标聚焦到其他地方的时候,对当前正在输入的文本框进行验证代码中已经有很多注释了,所以就直接贴代码了。</p>
jquery代码
$(document).ready(function(){
//类是required的在末尾都加上*标示
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//失去焦点的时候,进行判断输入的内容正不正确
$(".int :input").blur(function(){
var $parent = $(this).parent();
//每次判断的时候 将 之前添加到末尾的提示信息删除
$parent.find(".formtips").remove();
//获取 输入框中的值
var value = $(this).val();
var errorMsg ="";
var okMsg = "";
//当邮箱框失去焦点的时候 判断邮箱格式是否正确
if($(this).is("#email") ){
if( value=="" || (value !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(value) )){
errorMsg = '请输入正确的Email地址.';
}else{
okMsg = '输入正确.';
}
}else if($(this).is("#password") ){
if( value==""){
errorMsg = '请输入密码';
}else{
okMsg = '输入正确';
}
}else if( $(this).is("#cpassword") ){
var password = $("#password").val();
if( password != value){
errorMsg = "密码不一致";
}else{
okMsg = "输入正确";
}
}
if(errorMsg != ""){
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else {
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
});
//提交验证
var $cr = $("#cr");
$("#send").click(function(){
//勾选条款后,才能提交
if( !$cr.is(":checked")){
alert("请同意相关条款后,在提交!");
return false;
}
//如果表单中有onError类,表示某些框的信息不符合要求
var numError = $('form .onError').length;
if(numError){
alert("某些文本框输入内容不正确");
return false;
}
});
//重置
$('#res').click(function(){
$(".formtips").remove();
});
})
</script>
HTML代码
<form method="post" action="">
<div class="int">
<label for="email">邮箱:</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="password">密码:</label>
<!-- 为每个需要的元素添加required -->
<input type="password" id="password" class="required" />
</div>
<div class="int">
<label for="cpassword">确认密码:</label>
<!-- 为每个需要的元素添加required -->
<input type="password" id="cpassword" class="required" />
</div>
<div >
<input type="checkbox" value="1" id="cr" />
<label for="cr">同意相关条款</label>
</div>
<div class="sub">
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
</div>
</form>