案例:表单验证
Html
<body onload="loading()">
<h1>欢迎来到***注册页面</h1>
<form onsubmit="return testSub()" onreset="return testReset()">
<table border="1" cellspacing="0" height="360px" width="500px">
<tr>
<td>用户名</td>
<td><input type="text" id="uname" name="uname" onblur="testUserName()"/>
<span id="unameSpan" name="myspan"></span><!--name="myspan" 的用来重置清空的-->
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="pwd" name="pwd" onblur="testPwd()"/>
<span id="pwdSpan" name="myspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" id="chkpwd" onblur="testChkPwd()" />
<span id="chkpwdSpan" name="myspan"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="gender" value="0" checked="true">男
<input type="radio" name="gender" value="1">女
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="fav" value="0" />吃鸡
<input type="checkbox" name="fav" value="0" />王者
<input type="checkbox" name="fav" value="0" />lol
</td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" id="phone" onblur="testPhone()"/>
<span id="phoneSpan" name="myspan"></span>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>住址</td>
<td>
<select id="addr" onchange="testAddr()">
<option value="">---请选择---</option>
<option value="0">天河区</option>
<option value="0">海珠区</option>
<option value="0">越秀区</option>
<option value="0">花都区</option>
</select>
<span id="addrSpan"></span>
</td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" id="chknum" onblur="testCheckNum()"/>
<span id="chkNum"></span><!--验证码-->
<span id="chk" name="myspan"></span><!--提示-->
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" onclick="testAgree()" id="agree"/>遵守协议
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" disabled="disabled" id="sub"/>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</from>
</body>
JavaScript
<style>
.redSpan{
color:red;
}
.greenSpan{
color:green;
}
</style>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
// 用户名校验
function testUserName(){
// 定义一个正则表达式,要求:6-8位字符
var regex = /^\w{6,8}$/;
return checkFiled('uname',regex);
}
// 密码校验
function testPwd(){
// 定义一个正则表达式,要求:6-8位数字
var regex = /^\d{6,8}$/;
checkFiled('pwd',regex);
// 在录入了确认密码框,然后再录入密码的时候进行的校验:
testChkPwd();
}
// 手机号验证
function testPhone(){
// 定义一个正则表达式,
var regex = /^1[3456789]\d{9}$/;
return checkFiled('phone',regex);
}
//
function checkFiled(id,regex){
// 获取文本框中录入的数据
var a=$(id).value;
// 获取提示框的区域
var s=$(id+'Span');
// 开始校验:
if(a.length == 0){ // 录入数据为空
s.innerHTML="*";
s.className="redSpan";
return false;
}else if(regex.test(a)){ // 录入数据不为空,并且录对了
s.innerHTML="√";
s.className="greenSpan";
return true;
}else{// 录入数据不空,并且录错了
s.innerHTML="×";
s.className="redSpan";
return false;
}
}
function testChkPwd(){
// 获取密码的内容
var oldPwd = $('pwd').value;
// 获取确认密码框中的内容
var newPwd = $('chkpwd').value;
// 获取确认密码后的提示区域,span:
var s = $('chkpwdSpan');
// 开始校验
if(newPwd.length == 0){ // 录入数据为空
s.innerHTML="*";
s.className="redSpan";
return false;
}else if(oldPwd===newPwd){ // 录入数据不为空,并且录对了
s.innerHTML="√";
s.className="greenSpan";
return true;
}else{// 录入数据不空,并且录错了
s.innerHTML="×";
s.className="redSpan";
return false;
}
}
function testAddr(){
//获取选择的value
var v= $('addr').value;
if(v==""){
$('addrSpan').innerHTML="*";
$('addrSpan').className="redSpan";
return false;
}else{
$('addrSpan').innerHTML="√";
$('addrSpan').className="greenSpan";
return true;
}
}
function loading(){
// 生成一个4位数的验证码
var num = parseInt(Math.random()*9000)+1000;
// 将验证码添加到span中
$('chkNum').innerHTML=num;
}
function testCheckNum(){
// 获取验证码文本框的内容
var oldNum = $('chknum').value;
// 获取页面加载生成的验证码:内容
var newNum = $('chkNum').innerHTML;
// 获取验证码后的提示区域:span:
var s =$('chk');
// 开始校验
if(oldNum.length == 0){
s.innerHTML="*";
s.className="redSpan";
return false;
}else if(oldNum===newNum){
s.innerHTML="√";
s.className="greenSpan";
return true;
}else{
s.innerHTML="×";
s.className="redSpan";
return false;
}
}
function testAgree(){
// 获取选中框
var a = $('agree');
// 获取提交按钮
var b = $('sub');
// 如果选中,提交按钮就好使,如果不选中,提交按钮就不好使
b.disabled= !a.checked;
}
function testSub(){
var uname = testUserName();
var pwd = testChkPwd();
var phone = testPhone();
var chkNum = testCheckNum();
var addr = testAddr();
return uname && pwd && phone && chkNum && addr;
}
function testReset(){// 是否重置
var flag = window.confirm('确认要重置吗?');
if(flag){ //确认重置
var spans = document.getElementsByName('myspan');//获取的是集合
for(var i=0;i<spans.length;i++){
spans[i].innerHTML="";
}
return true;
}else{
return false;
}
}
</script>
更多推荐
JavaScript 正则表达式&表单验证
发布评论