我有一些逻辑需要梳理一下,所以请教一下老师:
(1)、因为随机验证码要被多个函数调用,所以它需要是全局变量,因为这个随机数函数调用在页面加载时就调用了,所以随机验证码虽然是全局变量,但最开始就被随机数函数赋值了。也就是说函数内部可以对外部的全局变量进行赋值?
(2)、姓名,密码,电话,邮箱,有一个公共的函数调用方法,点击事件时,是先调用了姓名函数,然后函数内部又一次去调用了公共函数,所以函数与函数之间需要是平级的?
在姓名函数传递的两个实参之时(相对来说公共函数调用接收的就是形参?),“uname”是手动指定的值,而是reg是函数内部的变量?
/************检验用户名方法**************/
function checkName(){
//汉字正则的声明,正则表达式,格式:var 名称 = /正则/
var reg = /^[\u4e00-\u9fa5]{3,5}$/;
return check("uname",reg);
}
(3)、调用函数,和接收函数返回值的区别?
function zong(){
//把所有方法调用一次,得到返回值,返回为true时,form表单中的提交功能才有用,这不是提交按钮.
var flag = checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkAdress()&&checkYZM()&&checkAgree();
return flag;
}
也就是说,如果zong()函数中,直接写checkName()就会再执行一遍,如果是var flag = checkName()那么主要就是为了接收返回值,中间各种的插入提示不会出现?例如输入姓名时,就会提示输入姓名是不是正确,而最后提交时(这时又一次调用了所有的函数),就不会再提示“用户输入正确”的提示?
整个网页源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var ran; //验证需要成为全局变量,以便于函数可以使用
/************验证码的生成**************/
function YZM(){
//获得6位随机数,在页面加载完成后调用
ran = Math.floor(Math.random()*900000+100000);//为什么不能是999999?如果小数乘以999999当然是小于999999,那么当最接近999999,再加100000时,就会超过8位数
//获得放置验证码span对象,并且插入进去
var span = document.getElementById("yzm_span");
span.innerText = ran;
}
/************检验用户名方法**************/
function checkName(){
//汉字正则的声明,正则表达式,格式:var 名称 = /正则/
var reg = /^[\u4e00-\u9fa5]{3,5}$/;
return check("uname",reg);
}
/************检验密码的方法**************/
function checkPwd(){
//密码正则的声明,正则表达式,格式:var 名称 = /正则/
var reg = /^\d{3,6}$/
return check("pwd",reg)
}
/************检验手机的方法**************/
function checkPhone(){
//手机正则的声明,正则表达式,格式:var 名称 = /正则/
var reg = /^1[34578]\d{9}$/
return check("phone",reg)
}
/************检验邮箱的方法**************/
function checkEmail(){
//邮箱正则的声明,正则表达式,格式:var 名称 = /正则/
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
return check("email",reg)
}
/************提取公共校验方法的部分**************/
function check(id,reg){
//获得输入的值
var uname = document.getElementById(id);
var val = uname.value;
//获得alt标识的属性
var alt = uname.alt;
//获得输入的提示的span对象
var span = document.getElementById(id+"_span");
//输入结果的检验判断
if(val==null||val==""){
span.innerText = "×输入不能为空。"
span.style.color = "red";
return false;
}else if(reg.test(val)){
//reg被定义为正则,reg.test一个正则对比的方法,而比较的对象是uname
span.innerText = "√"+alt+"码合乎规则。"
span.style.color = "green";
return true;
}else{
span.innerText = "×"+alt+"不合规则。"
span.style.color = "red";
return false;
}
}
/************检验性别的方法**************/
function checkSex(){
//获得所有的性别对象
var sex = document.getElementsByName("sex");//不要忘记一个s
//获得性别提示span对象
var span = document.getElementById("sex_span");
//遍历选择值,如果值的状态是选定的,就插入提示信息
for(var i in sex){
if(sex[i].checked){
span.innerHTML = "性别选择成功";
span.style.color = "green";
return true;
}
}
span.innerHTML = "请选择性别";
span.style.color = "red";
return false;
}
/************检验箱贯的方法**************/
function checkAdress(){
//获得已选择的值,因为默认为第一个,如果其值为0,代表没有选择.
var sel = document.getElementById("sel").value;
//获得选择提示的span对象
var span = document.getElementById("sel_span");
//判断对象的值
if(sel==0){
span.style.color = "red";
span.innerText = "请选择箱贯";
return false;
}else{
span.style.color = "green";
span.innerText = "箱贯选择成功";
return true;
}
}
/************检验验证码的方法**************/
function checkYZM(){
//获得自己输入的值
var yzm = document.getElementById("yzm").value;
//获得提示的span对象
var span = document.getElementById("yzm2_span");
//判断输入值是否等于随机生成值,由于是ran是全局变量
if(ran==yzm){
span.style.color = "green";
span.innerText = "验证码正确";
return true;
}else{
span.style.color = "red";
span.innerText = "验证码错误";
return false;
}
}
/************检验同意协议的方法**************/
function checkAgree(){
//获得同意框对象
var check = document.getElementById("check");
//获得提交框对象(只是针对提交按钮是否可用。)
var sub = document.getElementById("sub");
//对提交框属性重新赋值,由于提交禁止值为true,同意框选择返回结果也是true,只要取反就修改了提交框的属性,由true变为false
sub.disabled = !check.checked;
}
/************检验总体完成程度的方法**************/
function zong(){
//把所以方法调用一次,得到返回值,返回为true时,form表单中的提交功能才有用,这不是提交按钮.
var flag = checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkAdress()&&checkYZM()&&checkAgree();
return flag;
}
/*
* 正则表达式:
* 正则表达式是对于数据格式进行一定的规范限制
* ^:开始
* [0-9] [a-z A-Z] :数字 字母
* {2,4} :段域 至少是2位 最多是4位
* {3}:指定范围就是3位
* {2,}:至少是2位
* $:结束
* \d:[0-9]
* \w[0-9 a-z A-Z]
* */
</script>
</head>
<body onload="YZM()">
<center>
<h3>注册页面</h3>
<hr />
<form action="" method="get" onsubmit="return zong()">
<table>
<tr height="35px">
<td width="150px">用户名:</td>
<td width="400px">
<input type="text" name="uname" id="uname" value="" alt="用户名" onblur="checkName()"/>
<span id="uname_span">*用户名必须是3-5位的汉字</span>
</td>
</tr>
<tr height="35px">
<td>密码:</td>
<td>
<input type="password" name="pwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
<span id="pwd_span"></span>
</td>
</tr>
<tr height="35px">
<td>手机号:</td>
<td>
<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="checkPhone()" />
<span id="phone_span"></span>
</td>
</tr>
<tr height="35px">
<td>邮箱:</td>
<td>
<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
<span id="email_span"></span>
</td>
</tr>
<tr height="35px">
<td>性别:</td>
<td>
男:<input type="radio" name="sex" id="" value="1" onclick="checkSex()"/>
女:<input type="radio" name="sex" id="" value="0" onclick="checkSex()"/>
<span id="sex_span">
</span>
</td>
</tr>
<tr height="35px">
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="" value="1" />唱歌
<input type="checkbox" name="fav" id="" value="2" />睡觉
<input type="checkbox" name="fav" id="" value="3" />LOL<br />
<input type="checkbox" name="fav" id="" value="4" />旅游
<input type="checkbox" name="fav" id="" value="5" />高尔夫
<input type="checkbox" name="fav" id="" value="6" />篮球
</td>
</tr>
<tr height="35px">
<td>籍贯:</td>
<td>
<select name="adress" id="sel" onchange="checkAdress()">
<option value="0">--请选择--</option>
<option value="1">河南</option>
<option value="2">湖南</option>
<option value="3">海南</option>
<option value="4">云南</option>
</select>
<span id="sel_span"></span>
</td>
</tr>
<tr height="35px">
<td>验证码</td>
<td>
<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
<span id="yzm_span"></span>
<span id="yzm2_span"></span>
</td>
</tr>
<tr height="35px">
<td>个人介绍:</td>
<td>
<textarea name="intro" rows="8" cols="30"></textarea>
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同意本公司协议
</td>
</tr>
<tr height="35px">
<td colspan="2" align="center">
<input type="submit" id="sub" value="注册" disabled="true"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
<!--
/************检验用户名方法**************/
function checkName(){
//获得输入用户名的值
var uname = document.getElementById("uname").value;
//获得用户名提示的span对象
var span = document.getElementById("uname_span");
//汉字正则的声明,正则表达式,格式:var 名称 = /正则/
var reg = /^[\u4e00-\u9fa5]{3,5}$/
//用户名检验判断
if(uname==null||uname==""){
span.innerText = "×用户名不能为空。"
span.style.color = "red";
}else if(reg.test(uname)){
//reg被定义为正则,reg.test一个正则对比的方法,而比较的对象是uname
span.innerText = "√用户名合乎规则。"
span.style.color = "green";
}else{
span.innerText = "×用户名不合规则。"
span.style.color = "red";
}
}
-->