原生js表单验证代码

Html

Css


    用户注册
    
        *昵称：
        *手机：
        邮箱：
        身份证号：

*{
	margin:0;
	padding:0;
}
.content{
	width:800px;
	margin:50px auto;
}
.title{
	font-size:18px;
	font-weight:bold;
	padding-left:340px;
	margin-bottom:30px;
}
input{
	border:1px solid #a9a9a9;
	height:34px;
	line-height:34px;
	width:550px;
	margin-bottom:20px;
	padding-left:5px;
}
label{
	width:120px;
	text-align:right;
	display:inline-block;
}
#registerBtn{
	background:#3498db;
	color:#fff;
	font-size:14px;
	text-align:center;
	width:100px;
	line-height:34px;
	border:none 0;
	cursor:pointer;
	margin:20px 20px 0 0;
	margin-left:120px;
}
label span{
	color:red;
}
#errContent{
	padding:20px 0 0 30px;
	text-align:center;
}

var oRegisterBtn = document.getElementById('registerBtn');
var oName = document.getElementById('name');
var oPhone = document.getElementById('phone');
var oEmail = document.getElementById('email');
var oCardCode = document.getElementById('cardCode');
var oErrContent = document.getElementById('errContent');

oRegisterBtn.onclick = function() {
 var oRegister = true;
 var err = "";
 if (!oName.value) {
 err += "用户名不能为空 ";
 oRegister = false;
 } else if (!/^[\u4e00-\u9fa5]{2,6}$/.test(oName.value)) {
 err += "用户名格式不对 ";
 oRegister = false;
 }

if (!oPhone.value) {
 err += "手机号码不能为空 ";
 oRegister = false;
 } else if (!/^1[34578]\d{9}$/.test(oPhone.value)) {
 err += "手机号格式不对 ";
 oRegister = false;
 }

if (oEmail.value && !/^[a-zA-Z0-9]\w+@\w+\.(com|cn|edu)$/.test(oEmail.value)) {
 err += "邮箱格式不对";
 oRegister = false;
 }

if (oCardCode.value && !/^[1-9]\d{16}[0-9X]$/i.test(oCardCode.value)) {
 err += "身份证号式不对";
 oRegister = false;
 }

if (oRegister) {
        alert("您的资料已提交...");
    } else {
        oErrContent.innerHTML = err;
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生js表单验证代码



代码描述：原生js正则实现表单验证功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

爷，@风靡全球%

相关代码

原生js表单验证代码

最新