正则验证,电话,姓名等实例



**********html部分***********


<div class="formbox bdr fr" style="width: 500px; height: 400px;">
<form action="/p2p3/user_do_register.do" method="post">
<table class="productForm">
<tr>
<th>昵称</th>
<td><label class="touzi01"> <input type="text"
id="nickname" name="member.nickname" class="input_all input_1"
placeholder="请输入姓名,必须是汉字" maxlength="10" />
</label>
<div class="tishi">
<span id="realNameError" class="prompt_2 hidden"></span>
</div>
<td id="pnickname"></td>
</tr>
<tr>
<th>登录账号</th>
<td><label class="tishi"> <input type="text"
placeholder="请输入账号,必须字母、数字或下划线" id="code" name="member.code"
maxlength="12" class="input_all input_1" />


</label>
<div class="tishi"></div></td>
<td id="pcode"></td>
</tr>
<tr>
<th>登录密码</th>
<td><label class="touzi01"> <input maxlength="15"
style="width: 210px" class="input_all input_1"
name="member.pwd" id="pwd" type="password" placeholder="请输入密码">
</label>
<div class="tishi">
<span id="amountError" class="prompt_2 hidden"></span>
</div></td>
<td id="ppwd"></td>
</tr>
<tr>
<th>二次验证</th>
<td><label class="touzi01"> <input type="password"
placeholder="再次输入密码" id="pwd2" name="pwd2" maxlength="16"
class="input_all input_1" />
</label>
<div class="tishi"></div></td>
<td id="ppwd2"></td>
</tr>
<tr>
<th>电话</th>
<td><label class="touzi01"> <input type="text"
placeholder="请输入电话" id="tel" name="member.tel"
class="input_all input_1" maxlength="11" />
</label>
<div class="tishi">
<span id="mobileError" class="prompt_2 hidden"></span>
</div></td>
<td id="iphone"></td>
</tr>
<tr>
<th>图片验证码</th>
<td><label class="touzi01"> <input type="text"
id="yanzhengma" placeholder="请输入图片中字母,不分大小写"
class="input_all input_1" name="yanzhengma" /><br> <br>
<img id="tup"
src="<%=request.getContextPath()%>/yanzhengma.jpg">
</label>
<div id="dianji" οnclick="clkp()"
style="margin-left: 10px; cursor: pointer;">看不请,换一张</div>
<div class="tishi">
<span id="amountError" class="prompt_2 hidden"></span>
</div></td>
<td id="pyanzhengma"></td>
</tr>
<tr>
<th></th>
<td style="height: 40px;"><input name="confirm"
type="checkbox" id="cb" />注册服务协议</td>
</tr>


<tr>
<th></th>
<td><input type="submit" id="tj" value="立即申请"
class="btn btnSize_6 btn_orange" style="background-color: gray;"
disabled="disabled" /></td>
</tr>
<tr>
<td hidden="hidden"><input id="state"></td>


</tr>
</table>
</form>
</div>








*****************js 部分************************
$(function() {
//昵称验证,必须是汉字
$("#nickname").mouseout(function() {
//姓名格式比对
var acc = $("#nickname").val().trim();
var sgl = /[\u4E00-\u9FA5]+/;
if (sgl.test(acc)) {
$("#pnickname").text("昵称正确").css("color", "green");
$("#state").val("1")
} else {
$("#pnickname").text("昵称必须是汉字").css("color", "red");
$("#state").val("0")
}
})


//账号验证,必须是4-12字符间字母、数字或下划线
$("#code").mouseout(function() {
//账号格式比对
var acc = $("#code").val().trim();
var sgl = /^\w{4,12}$/;
if (sgl.test(acc)) {
$("#pcode").text("账号可用").css("color", "green");
$("#state").val("1")
} else {
$("#pcode").text("必须是4-12字符间字母、数字或下划线").css("color", "red");
$("#state").val("0")
}
})


//点击显示密码
$('#pwd').hideShowPassword({
innerToggle : true,
touchSupport : Modernizr.touch
});


//第一次密码验证,必须是8-16位的字母、数字
$("#pwd").mouseout(function() {
//账号格式比对
var acc = $("#pwd").val().trim();
var sgl = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
if (sgl.test(acc)) {
$("#ppwd").text("密码可用").css("color", "green");
$("#state").val("1")
} else {
$("#ppwd").text("密码须是8-16字符间字母+数字").css("color", "red");
$("#state").val("0")
}
})


//二次密码验证,一二次密码比对,
$("#pwd2").mouseout(function() {
//账号格式比对
var pwd2 = $("#pwd2").val().trim();
var pwd = $("#pwd").val().trim();
if (pwd2 == pwd) {
//的二次密码为空
if (pwd2 == "") {
$("#ppwd2").text("密码不能为空").css("color", "red");
$("#state").val("0")
} else {
$("#ppwd2").text("密码一致").css("color", "green");
$("#state").val("1")
;
}
} else {
$("#ppwd2").text("两次输入密码不一致").css("color", "red");
$("#state").val("0")
}
})


//手机号验证,开头是1
$("#tel").mouseout(function() {
//账号格式比对
var acc = $("#tel").val();
var sgl = /^1\d{10}$/;
if (sgl.test(acc)) {
$("#iphone").text("号码正确").css("color", "green");
$("#state").val("1")
} else {
$("#iphone").text("号码错误").css("color", "red");
$("#state").val("0")
}
})


//验证码验证
$("#yanzhengma").mouseout(function () {
$.post("<%=request.getContextPath()%>/user_do_yzm.do", {
"yzm" : $("#yanzhengma").val()
}, function(result) {
if (result == 'equ') {
$("#pyanzhengma").html("验证码输入正确")
$("#pyanzhengma").css("color", "green");
} else {
$("#pyanzhengma").html("验证码输入错误")
$("#pyanzhengma").css("color", "red");
}
})
})
//邮箱格式验证
     $("#mail").blur(function(){
var ml=$("#mail").val();
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 
if (reg.test(ml)) {
$("#tmail").text("格式正确").css("color", "green");
} else {
$("#tmail").text("格式有误").css("color", "red");

}
})




})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值