JS前端验证
来源：互联网 发布：mac 安装apache 编辑：程序博客网 时间：2024/06/13 12:09
<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>
- js前端输入验证
- js前端验证脚本
- JS 前端验证 脚本
- 前端验证代码 - JS
- js 表单前端验证
- JS-Web前端验证
- JS前端验证
- [js]前端表单验证
- js 前端验证码
- 前端 验证数据的js
- js 前端验证表单输入
- 前端表单js验证笔记
- JS前端验证(验证页面属性格式)
- js进行前端数据的验证
- js前端表单验证（禁止输入）
- 前端js+html实现简单验证码
- JS前端身份证信息验证正则表达式
- JS前端验证码的实现
- NO.6_292. Nim Game
- Qt 打印PDF
- 医疗保险管理系统设计 Java
- Go-Sort(Cont)
- 2016 寒假集训有感
- JS前端验证
- 【排序及算法】冒泡/选择/插入/快速排序、顺序查找/折半查找算法
- 感觉自己在做梦1.14
- ArrayList源码分析
- sklearn——朴素贝叶斯分文本分类2
- Linux下Setuid命令！
- 直接插入法排序
- 问题二十五：为什么有时候XnView无法显示PPM图片？
- 图论（三）图的遍历
