所属分类:网页特效-表单特效
form{width: 570px;height: 300px;margin: 100px auto;}
label{width: 64px;float: left;clear: left;height: 36px;line-height: 36px;margin-top: 10px;}
input{width: 300px;height: 36px;line-height: 36px;margin-top: 10px;text-indent: 8px;font-size: 16px;font-family: "微软雅黑";border: 1px solid #ccc;float: left;}
#sub{width: 302px;height: 40px;border: 1px solid #ccc;background: #888;color: #fff;font-size: 18px;text-indent: 0;}
.spa{height: 36px;line-height: 36px;width: 204px;display: inline-block;float: left;font-size: 12px;color: #BD362F;text-indent: 10px;margin-top: 10px;}
<script src="js/jquery-1.12.2.min.js"></script>
window.onload=function(){
$("#username").focus()
}
/************************ 失焦判断 **********************************/
$("input").blur(function(){
$(".spa").css("color","#BD362F")
if($(this).is("#username")){ //姓名判断
var na=/^[\u4E00-\u9FA5]{2,4}$/
if($("#username").val()!=""){
if(!(na.test($("#username").val()))){
$(".spa1").text("请输入2-4个汉字");
$(this).css("border","1px solid #BD362F")
return false;
}else if(na){
$(".spa1").text("");
return true;
}
}else{
$(".spa1").text("");
}
}
if($(this).is("#userphone")){ //手机号判断
var ph=/^1[3|5|7|8|][0-9]{9}$/
if($("#userphone").val()!=""){
if(!(ph.test($("#userphone").val()))){
$(".spa2").text("请输入正确手机号");
$(this).css("border","1px solid #BD362F")
return false;
}else if(ph){
$(".spa2").text("");
return true;
}
}else{
$(".spa2").text("");
}
}
if($(this).is("#useraddress")){ //地址判断
var ad=/^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
if($("#useraddress").val()!=""){
if(!(ad.test($("#useraddress").val()))){
$(".spa3").text("请输入正确地址");
$(this).css("border","1px solid #BD362F")
return false;
}else if(ad){
$(".spa3").text("");
return true;
}
}else{
$(".spa3").text("");
}
}
})
/********************** 聚焦提示 ************************/
$("input").focus(function(){
if($(this).is("#username")){
$(".spa1").text("2-4个汉字").css("color","#aaa")
$(this).css("border","1px solid #aaa")
}
if($(this).is("#userphone")){
$(".spa2").text("11位手机号码").css("color","#aaa")
$(this).css("border","1px solid #aaa")
}
if($(this).is("#useraddress")){
$(".spa3").text("最少8个字符(汉字、字母和数字)").css("color","#aaa")
$(this).css("border","1px solid #aaa")
}
})
/*********************** 提交验证 ***************************/
$("#sub").click(function(){
var na=/^[\u4E00-\u9FA5]{2,4}$/; //姓名正则
var ph=/^1[3|5|7|8|][0-9]{9}$/; //手机号正则
var ad=/^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则
if(na.test($("#username").val())&&ph.test($("#userphone").val())&&ad.test($("#useraddress").val())){
return true;
}else{
if($("#username").val()==""){
$(".spa1").text('请你填写用户名')
}
if($("#userphone").val()==""){
$(".spa2").text('请你填写手机号')
}
if($("#useraddress").val()==""){
$(".spa3").text('请你填写地址')
}
return false;
}
})
<form action="" method="post">
<label id="name">姓 名:</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
<label id="phone">手机号:</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
<label id="address">地 址:</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
<label> </label><input type="submit" value="注册" id="sub" />
</form>