您的位置：首页 > Web前端

JS前端验证

2017-01-14 21:00 232 查看

<html>

<head>

<title>易购——login</title>

<link type="text/css" href="css/login.css" rel="stylesheet">

<script type="text/javascript">

window.onload=function(){
// alert("Go")

var userName = document.getElementById("userName").value; ;

// alert(userName);

var resuName =document.getElementById("resuName");

if(userName==null||userName==""){

resuName.innerHTML="用户名不能为空";

}

var password = document.getElementById("password").value;

var resuPwd = document.getElementById("resuPwd");

if(password==null||password==""){

resuPwd.innerHTML="密码不能为空";

}

}
</script>

2

表单

<form action="AddUserServlet.do" name="myForm" method="post"
onsubmit="return chekAll()">

<table>

<tr>

<td class="Ntext"></td>

<td style="color:red">${msg }</td>

<td></td>

</tr>

<tr>

<td class="Ntext">用户名（*）：</td>

<td><input type="text" class="In" name="userName" id="userName" onblur="checkName()"></td>

<td id="resultUserName"></td>

</tr>

<tr>

<td class="Ntext">真实姓名（*）：</td>

<td><input type="text" class="In" name="truename" id="trueName" onblur="chekTrueName()"></td>

<td id="resultRealName"></td>

</tr>

<tr>

<td class="Ntext">登录密码（*）：</td>

<td><input type="password" class="In" name="pwd" id="password" value="a5656917" onblur="chePwd()"></td>

<td id="resultPwd"></td>

</tr>

<tr>

<td class="Ntext">确认密码（*）：</td>

<td><input type="password" class="In" name="repwd" id="repwd" value="a5656917" onblur="chekRePass()" ></td>

<td id="resultRePwd"></td>

</tr>

<tr>

<td class="Ntext">性别（*）：</td>

<td ><input type="radio" value="1" name="sex" checked="checked"><img src="images/Male.gif" >

<input type="radio" value="0" name="sex"><img src="images/Female.gif"></td>

<td id="resultSex"></td>

</tr>

<tr>

<td class="Ntext">出生日期：</td>

<td><input type="text" class="Wdate" name="birthDay" id="birthday" value="1991-09-12" onblur="chkBirthday()"></td>

<td id="resulBirthday"></td>

</tr>

<tr>

<td class="Ntext">身份证：</td>

<td><input type="text" class="In" name="user_id" id="user_id" value="370481199109121215" onblur="chkUser_id()"></td>

<td id="resultUser_id"></td>

</tr>

<tr>

<td class="Ntext">电子邮件：</td>

<td><input type="text" class="In" name="email" id="email" value="5656@qq.com" onblur="chkEmail()"></td>

<td id="resultEmail"></td>

</tr>

<tr>

<td class="Ntext">手机号：</td>

<td><input type="text" class="In" name="phone" id="phone" onblur="chkPhones()" value="13063023413"></td>

<td id="resultPhone"></td>

</tr>

<tr>

<td class="Ntext">地址（*）：</td>

<td><input type="text" class="In" name="address" value="齐鲁云商大厦"></td>

<td id="resultAddress"></td>

</tr>

<tr><td colspan="2" class="right_bottom"><input type="image" src="images/submit.gif"></td></tr>

</table>

</form>

<script type="text/javascript">

var CHKLOGINNAME="^(?![0-9]+$)[0-9A-Za-z]{1,16}$";

var CHKPASSWORD="^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$";

var CHKTRUENAME="^[\u0391-\uFFE5]+$";

var CHKBIRTHDAY="^[0-9]{4}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$";

var CHKEMAIL="^[a-z0-9_]+@[a-z0-9]+(\\.[a-z]{2,3}){1,2}$";

var CHKPHONE="^1[3,5,7,8][0-9]{9}$";

//检测用户名

function checkName(){

//创建正则对象

var rex =new RegExp(CHKLOGINNAME);

var NameObj= document.getElementById("userName");

var resultObj=document.getElementById("resultUserName");

if(rex.test(NameObj.value)){
resultObj.innerHTML="√";
resultObj.style.color="green";
return true ;

}

else{
//内嵌文本
resultObj.innerHTML="用户名不符合要求";
resultObj.style.color="red";
NameObj.focus();
NameObj.value="";
return false ;

}

}

//验证密码是否一致

function chekRePass(){
var password =document.getElementById("password");
var repwd =document.getElementById("repwd");
var resultRePwd = document.getElementById("resultRePwd");
//alert("OK");
if(myForm.pwd.value==myForm.repwd.value){
resultRePwd.innerHTML="√";
resultRePwd.style.color="green";
}
else{
password.focus();
password.innerHTML="";
resultRePwd.innerHTML="密码不一致";
resultRePwd.style.color="red";
}

}

//验证真实姓名

function chekTrueName(){

var trueObj= document.getElementById("trueName");

var truename =document.getElementById("resultRealName");

if(myForm.truename.value==""){
truename.innerHTML="√";
return true ;

}

//正则

var rex = new RegExp(CHKTRUENAME);

if(rex.test(trueObj.value)){
truename.innerHTML="√";
truename.style.color="green";
return true ;

}

else{
truename.innerHTML="姓名不符合格式";
truename.style.color="red";
trueObj.focus();
trueObj.innerHTML="";
return false ;

}

}

//验证密码

function chePwd(){

var rex = new RegExp(CHKPASSWORD);

var passObj=document.getElementById("password");

var resultPwd =document.getElementById("resultPwd");

if(rex.test(passObj.value)){
resultPwd.innerHTML="√";
resultPwd.style.color="green";
return true ;

}

else{
resultPwd.innerHTML="密码不符合要求";
resultPwd.style.color="red";
passObj.focus();
passObj.value="";
return false ;

}

}

//验证生日

function chkBirthday(){

var birthObj=document.getElementById("birthday");

var resultBirObj = document.getElementById("resulBirthday");

//创建正则

var rex = new RegExp(CHKBIRTHDAY);

if(rex.test(birthObj.value)){
resultBirObj.innerHTML="√";
resultBirObj.style.color="green";
return true ;

}

else{
resultBirObj.innerHTML="生日格式不正确";
resultBirObj.style.color="red";
birthObj.focus();
birthObj.value="";
return false ;

}

}

//验证邮箱

function chkEmail(){

var emailObj= document.getElementById("email");

var resultEmailObj=document.getElementById("resultEmail");

var rex = new RegExp();

if(rex.test(emailObj.value)){
resultEmailObj.innerHTML="√";
resultEmailObj.style.color="green";
return true ;

}

else{
resultEmailObj.innerHTML="邮箱格式不正确";
resultEmailObj.style.color="red";
emailObj.focus();
emailObj.value="";
return false ;

}

}

//验证手机号

function chkPhones(){

var phoneObj= document.getElementById("phone");

var resultPhObj=document.getElementById("resultPhone");

var reg = new RegExp(CHKPHONE);

if(reg.test(phoneObj.value)){
resultPhObj.innerHTML="√";
resultPhObj.style.color="green";
return true ;

}

else{
resultPhObj.innerHTML="手机格式不正确";
resultPhObj.style.color="red";
phoneObj.focus();
phoneObj.value="";
return false ;

}

}

//验证身份证

function chkUser_id(){

var userid =document.getElementById("user_id");

var resultUser_id =document.getElementById("resultUser_id");

//允许身份证为空
if(userid.value==''){
resultUser_id.innerHTML="√";
resultUser_id.style.color="green";
return true ;
}

//验证通过

if(IdentityCodeValid(myForm.user_id.value)){
resultUser_id.innerHTML="√";
resultUser_id.style.color="green";
setBirthday(myForm.user_id.value, document.getElementById("birthday"));
return true ;

}

else{
resultUser_id.innerHTML="身份证格式不正确";
resultUser_id.style.color="red";
userid.focus();
userid.value="";
return false ;

}

}

//验证所有

function chekAll(){
return checkName()&&chePwd()&&chkBirthday()&&chkEmail()&&chkPhones() ;

}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航