JS(JavaScript),最先听到的时候以为是和java一样,必须要学的,但是后来接触到后,才发现是不一样的,JS一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果(来源百度百科)。
本文主要是讲将JS如何嵌入HTML中实现表单的验证,会简单介绍下HTML、CSS、JS的内容,以及正则表达式,由于笔者还是个初学者,所以不会很深入,很多地方也是有点模糊不清,不对之处,还望多多指教,觉得不错还请点个赞!
互联网的三大基石
URL(Uniform Resource Location):‘统一资源定位符’–相当于定位信号
HTTP(HyperText Transfer Protocol):‘超文本传输协议’
HTML(Hyper Text Markup Language):’超文本标记语言‘
HTML、CSS及JavaScript的关系
HTML是网页的网页信息规范化展示的语言,也可以说是网页的骨架。
CSS是层叠样式表,如果说HTML是一个骨架的话,那CSS就是一件件衣服,装饰在骨架上。
JavaScript是一种具有函数优先的轻量级,解释型或即时编译型的编程语言,作为web页面脚步而出名,可以说没有JS的网页是没有灵魂的,因为HTML和CSS是很难实现动态网页的效果的,无法实现交互
本文实现功能
能够实现基本的表单验证,验证基础的表单格式
HTML实现form表单
HTML的实现十分简单,语法简单易懂,容易上手,这里推荐学习w3school在线教程:
里面有关于HTML的一切。
从实现效果上看form表单中,需要有我们的input标签,还有我们的span标签,布局我们可以用table表格标签或者ul无序列表等,但是相对于我们想实现的功能table布局会更简单。
这里不多加赘述,源码在后面。
JavaScript实现动态验证
JS中DOM元素
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。
简单点讲,DOM提供了我们通过JS操作HTML节点元素的方法
- 通过 id 查找 HTML 元素
- 通过标签名查找 HTML 元素
- 通过类名查找 HTML 元素
- 通过 CSS 选择器查找 HTML 元素
- 通过 HTML 对象集合查找 HTML 元素
下面只讲解id的操作
var uid=document.getElementById(id); 这里我们可以获得相应id的对象赋予uid,接下来我们就可以对这个id所处的对象进行操作了
还有其他相对应的方法,具体可以查阅W3C的相关文档。
正则表达式
我们实现用户名验证,规定用户名和密码格式时,是不是有时候会需要一定的格式,比如只能输入3到5个汉字,密码必须在4-6位数字之间,还有邮件的格式等等,再到后面我们想学习爬虫,都是需要用到正则表达式
^[\u4e00-\u9fa5]{m,n}$ 校验汉字在m-n位之间,\u4e00-\u9fa5是用来判断是不是中文的一个条件
^\d{m}$ 数字校验,{m}是检验数字长度是不是为m,{m,n}检验数字长度在不在m到n之间
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ 邮箱验证
以上便是本文用到的三种正则化表达式,以前学习的时候都不知道正则化的作用,随着学习的深入越发觉得强大,在这里再给大家推荐一篇博文,里面总结了大量的正则化表达式,十分有用。
JS如何应用正则化表达式
reg=/^[\u4e00-\u9fa5]{3,5}$/ JS引用格式即/正则表达式/
reg.test(value) test()测试方法,会验证vale里面的东西是否符合正则表达式,是返回ture, 否返回False
JS如何生成随机验证码
JS中的Math对象,用于执行数学任务。
Math.random 会返回0-1之间的随机数,这里我们要清楚我们需要的是4位验证码,所以0-1想化为四位数,就要乘以10000,然后再向下取整,但是如果乘以10000,会有个问题,我随机生成的是0.045849怎么办,就算乘以10000也只是三位数,不符合我们的要求,那么为了保证一直为4位数,我们可以乘以9000后+1000,这样即使生成的是0.001,0.001*9000+1000=1009,无论怎样都能保证生成的是四位随机数。
function YZM(){
// 四位随机整数
var ran=Math.floor(Math.random()*9000+1000);
//获得span对象
var span=document.getElementById("yzm_span");
span.innerText=ran;
}
JS验证用户名和密码
这里的语法很简单,可以通过备注来实现,后续的几个验证也是大同小异
function check(id,reg){
// 获得id对象
var uid=document.getElementById(id);
// 获得id对象中的value属性和alt属性
var value=uid.value;
var alt=uid.alt;
// 获得span对象,用于操作和提示信息
var span=document.getElementById(id+"_span");
// 简单的逻辑判断,是不是符合正则表达式
if (reg.test(value)){
// 对span里面的文本进行操作
span.innerText=alt+"合法";
// 对span里面的文本颜色进行操作
span.style.color="green";
// 返回true,用于最后提交时的表单校验
return true;
}
else{
span.innerText=alt+"不合法";
span.style.color="red";
return false;
}
}
JS同意协议后方可注册
最后的注册按钮有一个特别的属性disabled,有一个禁用输入字段的 HTML 表单,当它为”true“或者"disabled"时,按钮成灰色的,无法注册,我们需要通过操作节点改变他的属性来实现这个功能
function checkAgree(){
var check=document.getElementById("check");
var sub=document.getElementById("sub");
sub.disabled=!check.checked;
}
JS表单提交后验证表单,判断是否阻止表单提交
我们需要再提交表单时验证程序,可以onsubmit属性,这样我们点击提交时会执行zong方法(我书写的验证表单的方法),依据返回的ture和false判断是否提交表单。
<form action="" method="get" onsubmit="return zong()">
zong(方法)调用所有表单验证方法,只要有一个为false则返回false
function zong(){
var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM(); return flag;
}
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*验证码生成*/
function YZM(){
// 四位随机整数
var ran=Math.floor(Math.random()*9000+1000);
//获得span对象
var span=document.getElementById("yzm_span");
span.innerText=ran;
}
// 校验用户名方法
function check(id,reg){
var uid=document.getElementById(id);
var value=uid.value;
var alt=uid.alt;
var span=document.getElementById(id+"_span");
if (reg.test(value)){
span.innerText=alt+"合法";
span.style.color="green";
return true;
}
else{
span.innerText=alt+"不合法";
span.style.color="red";
return false;
}
}
/********用户名检验**********/
function checkName(){
var reg=/^[\u4e00-\u9fa5]{3,5}$/;
return check("uname",reg);
}
/********密码检验**********/
function checkPwd(){
var reg=/^\d{3,6}$/;
return check("pwd",reg);
}
/********手机号检验**********/
function checkPhone(){
var reg=/^\d{11}$/;
return check("phone",reg);
}
/********邮箱检验**********/
function checkEmail(){
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return check("email",reg);
}
/********性别检验**********/
function checkSex(){
return checkSex_Fav('sex')
}
function checkFav(){
return checkSex_Fav('fav')
}
function checkSex_Fav(name){
//获得所有性别对象
var uname=document.getElementsByName(name);
//获得span对象
var span=document.getElementById(name+"_span");
for(var i in uname){
if(uname[i].checked){
span.innerHTML="选择成功";
span.style.color="green"
return true;
}
}
span.innerHTML="请选择";
span.style.color="red";
return false;
}
/********籍贯检验**********/
function checkAdress(){
var value=document.getElementById("sel").value;
var span=document.getElementById("sel_span");
if (value!=0){
span.innerText="籍贯选择成功";
span.style.color="green";
return true;
}
else{
span.innerText="籍贯未选择";
span.style.color="red";
return false;
}
}
/********验证码检验**********/
function checkYZM(){
var value=document.getElementById("yzm").value;
var span=document.getElementById("yzm_span");
var span2=document.getElementById("yzm2_span");
if(value==span.innerText){
span2.innerText="验证码输入正确";
span2.style.color="green";
return true;
}
else{
span2.innerText="验证码输入错误";
span2.style.color="red";
YZM();
return false;
}
}
/********是否同意协议**********/
function checkAgree(){
var check=document.getElementById("check");
var sub=document.getElementById("sub");
sub.disabled=!check.checked;
}
/********校验表单**********/
function zong(){
var flag=checkName()&&checkPwd()&&checkPhone()&&checkEmail()&&checkSex()&&checkFav()&&checkAdress()&&checkYZM();
return flag;
}
</script>
</head>
<body onload="YZM()">
<center>
<h3>注册页面</h3>
<hr />
<!-- οnsubmit="return zong()" -->
<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" onclick="checkFav()"/>唱歌
<input type="checkbox" name="fav" id="" value="2" onclick="checkFav()"/>睡觉
<input type="checkbox" name="fav" id="" value="3" onclick="checkFav()"/>LOL<br />
<input type="checkbox" name="fav" id="" value="4" onclick="checkFav()"/>旅游
<input type="checkbox" name="fav" id="" value="5" onclick="checkFav()"/>高尔夫
<input type="checkbox" name="fav" id="" value="6" onclick="checkFav()"/>篮球
<span id="fav_span">
</span>
</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>
简单的表单验证已经做完了,大家能给个赞鼓励下吗!!!