前端之家收集整理的这篇文章主要介绍了
注册正则表达式的运用,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//Ddiv XHTML 1.0 divansitional//EN" "http://www.w3.org/div/xhtml1/Ddiv/xhtml1-divansitional.ddiv">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>沈阳科技局-注册页面</title>
<Meta name="keywords" content="沈阳科技局">
<Meta name="description" content="沈阳科技局">
<Meta name="renderer" content="webkit">
<link rel="stylesheet" type="text/css" href="/${res}/css/index.css">
<link href="/${res}/css/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="/${res}/css/owl.theme.css" rel="stylesheet" type="text/css" />
<script src="/${res}/js/jquery-1.10.1.min.js"></script>
<script src="/${res}/js/owl.carousel.min.js"></script>
<script src="/${res}/js/indexPage.js"></script>
<script src="/${res}/js/sendSms.js"></script>
<script src="/${res}/js/regist.js"></script>
<script src="/${res}/plugin/layui/layui.js"></script>
</head>
<script type="text/javascript">
[#--改变个人注册和公司注册--]
function change(span,next,type) {
$(span).removeClass("com_login");
$(span).addClass("personal_login");
$("input[name=userType]").val(type);
if(next) {
$(span).next("span").removeClass("personal_login");
$(span).next("span").addClass("com_login");
} else {
$(span).prev("span").removeClass("personal_login");
$(span).prev("span").addClass("com_login");
}
}
</script>
<body>
<div class="login_img">
<div class="registerBox">
<div class="login">
<div class="login_header">
<span class="fl" style="font-size:18px;">沈阳市中小微企业科技服务平台|注册</span>
<span class="fr" style="font-size:14px;">已有注册账号,请<a style="color:#168AD5;" href="login.jspx">登录</a></span>
<div class="clear"></div>
</div>
<div class="login_content">
<div class="login_title">
<span class="empty_login">个人注册</span><span class="personal_login" onclick="change(this,true,1);">企业注册</span><span class="com_login" onclick="change(this,false,2);">个人注册</span><span class="empty_login">个人注册</span>
<form id="registform" method="post" onsubmit="return check();" action="/micro/register.jspx">
<div class="login_items">
<span>账号:</span>
<input id="username" name="username" onblur="CheckUserName(this)"></input>
</div>
<div id="uName" style="text-align: center;background: blue;"></div>
<div class="login_items">
<span>密码:</span>
<input id="password" name="password" onblur="CheckPassword(this);"></input>
</div>
<div id="uPass" style="text-align: center;background: blue;"></div>
<div class="login_items">
<span>确认密码:</span>
<input id="rpassword" name="rpassword" onblur="CheckrePassword(this);"></input>
</div>
<div id="urPass" style="text-align: center;background: blue;"></div>
<div class="login_items">
<span>邮箱:</span>
<input id="email" name="email" onblur="CheckEmail(this);" onblur="CheckUserName(this);"></input>
</div>
<div id="em" style="text-align: center;background: blue;"></div>
<div class="login_items2">
<span>手机号码:</span>
<input id="mobile" name="mobile" onblur="CheckMobile(this);"></input>
<span id="ssendSms" class="login_login" style="text-align:center;cursor: pointer" onclick="sendResetVerifyCode2()">获取验证码</span>
</div>
<div id="mb" style="text-align: center;background: blue;"></div>
<div class="login_items">
<span>验证码:</span><input id="ptSms" name="ptSms"></input>
</div>
<div class="clear"></div>
<div style="text-align:center;">
<span class="login_login" style="cursor: pointer;" onclick="checkSmsRegister()">提交</span>
</div>
<input id="typeid" type="hidden" name="userType" value="1">
</form>
</div>
</div>
<input id="checkSms" type="hidden">
</div>
</div>
</div>
[#include "../include/footer.html" /]
</body>
</html>
js
代码
function CheckUserName(){
var username=$("#username").val();
//正则表达式验证
var reg=/^[a-zA-Z0-9]{3,10}$/;
var res=reg.test(username);
var flag;
if(!res){
$("#uName").show();
$("#uName").html("用户名只能是3-10个字符,并且只能是英文字母或数字");
return false;
}else{
$("#uName").hide();
$.ajax({
type:"post",dataTyep:"json",async: false,url:"check_username.jspx",data:{
username:username
},success : function(result) {
if (result.result == 0) {
$("#uName").show();
$("#uName").html("用户名已经使用");
flag = false
} else {
$("#uName").hide();
flag = true
}
}
})
return flag
}
}
//验证电子邮箱
function CheckEmail(){
var email=$("#email").val();
var reg= /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var res=reg.test(email);
var flag;
if(!res){
$("#em").show()
$("#em").html("请输入正确的邮箱格式")
return false
}else{
$("#em").hide()
$.ajax({
type : "post",dataType : "json",url : "email_unique.jspx",data : {
email : email
},success : function(result) {
if(result.result == 0){
$("#em").show()
$("#em").html("邮箱已经存在在")
flag = false
}else{
$("#em").hide()
flag = true
}
}
})
return flag
}
}
//检查密码
function CheckPassword(){
//只能是数字和字母,最多10位
var passWord=$("#password").val();
if((""==passWord)||(null==passWord)){
$("#uPass").show();
$("#uPass").html("密码不能为空");
return false;
}else{
//正则表达式验证
var reg=/^[a-zA-Z0-9]{3,10}$/;
var res=reg.test(passWord);
if(!res){
$("#uPass").show();
$("#uPass").html("密码只能是3-10个字符,并且只能是英文字母或数字");
return false;
}else{
$("#uPass").hide();
return true;
}
}
}
//检查验证密码
function CheckrePassword(){
//两次密码是否一致
var rePassWord=$("#rpassword").val();
var passWord=$("#password").val();
if(rePassWord!=passWord){
$("#urPass").show()
$("#urPass").html("两次密码输入不一致!")
return false;
}else{
$("#urPass").hide();
return true
}
}
//验证手机
function CheckMobile(){
var mobile=$("#mobile").val();
var reg= /^1[3|4|5|7|8]\d{9}$/;
var res=reg.test(mobile);
var flag;
if(!res){
$("#mb").show()
$("#mb").html("请输入正确的手机格式")
return false;
}else{
$("#mb").hide()
$.ajax({
type : "post",url : "mobile_unique.jspx",data : {
mobile : mobile
},success : function(result) {
if (result) {
$("#mb").hide()
flag = true
} else {
$("#mb").show()
$("#mb").html("手机号码已存在")
flag = false
}
}
})
return flag
}
}
//整体
function check(){
if(CheckUserName()&&CheckPassword()&&CheckrePassword()&&CheckEmail()
&&CheckMobile()){
return true;
}else{
alert("请正确输入注册信息")
return false;
}
}
//确认验证码
function checkSmsRegister(){
var checkSms=$("#checkSms").val();
var putSms=$("#ptSms").val();
if(checkSms!=""&&checkSms==putSms){
$.post($("#registform").attr("action"),$("#registform").serialize(),function(result) {
if(result.success) {
layer.msg("注册成功!");
setInterval("window.location.href = '/';",1000);
return ;
}
layer.msg("注册失败!",result.FailedMessage);
});
///$("#registform").submit();
}else{
alert("验证码输入错误");
}
}
原文链接:https://www.f2er.com/regex/358524.html