如何利用JavaScript进行表单验证

来源：动视网责编：小采时间：2020-11-27 20:13:16

如何利用JavaScript进行表单验证

如何利用JavaScript进行表单验证:1、数据有效行性，安全性验证。3层验证。1、客户端 js脚本验证2、服务端 java-servlet 服务器语言验证3、数据库数据库约束2、onsubmit 表单提交事件。form表单元素相应事件，点击提交按钮触发。（type=submit）onsubmit会接收true或fal

推荐度：

点击下载本文 文档为doc格式

导读如何利用JavaScript进行表单验证:1、数据有效行性，安全性验证。3层验证。1、客户端 js脚本验证2、服务端 java-servlet 服务器语言验证3、数据库数据库约束2、onsubmit 表单提交事件。form表单元素相应事件，点击提交按钮触发。（type=submit）onsubmit会接收true或fal

1、数据有效行性，安全性验证。3层验证。

1、客户端 js脚本验证

2、服务端 java-servlet 服务器语言验证

3、数据库数据库约束

2、onsubmit 表单提交事件。form表单元素相应事件，点击提交按钮触发。（type=”submit”）

onsubmit会接收true或false返回值。

返回true提交当前表单，

返回false，不提交表单

3、String对象。

字符串对象的方法：字符串对象.方法名();

常用方法：
toLowerCase() 把字符串转化为小写
toUpperCase() 把字符串转化为大写
charAt(index) 返回指定位置的字符
indexOf(字符串,index) 查找某个指定的字符串中首次出现的位置
substring(zindex1.index2) 返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符

电子邮件格式验证：

1、使用getElementById()获取Email的值
使用字符串方法indexOf( ) 判断Email的值是否包含“@”和“.”符号。
根据函数返回值是true还是flase来决定是否提交表单

var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1){
 alert("Email格式不正确\n必须包含@");
 return false; 
}

2、使用String对象的length属性验证密码的长度

var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
 alert("密码必须等于或大于6个字符");
 return false; 
}

3、验证两次输入密码是否一致

var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
 alert("两次输入的密码不一致");
 return false; 
}

4、使用length属性获取文本长度，使用for循环和substring()方法依次截断单个字符，判断每个字符是否是数字

var user=document.getElementById("user").value;
 for(var i=0;i<user.length;i++){
 var j=user.substring(i,i+1)
 if(isNaN(j)==false){
 alert("姓名中不能包含数字");
 return false; 
 }
}

5 、文本框对象的属性、方法和事件

事件：
onblur 失去焦点，当光标离开某个文本框时触发
onfocus 获得焦点，当光标进入某个文本框时触发
onkeypress 某个键盘按键被按下并松开

方法：
blur() 从文本域中移开焦点
focus() 在文本域中设置焦点，即获得鼠标光标
select() 选取文本域中的内容

属性：

1、清除文本框中初始内容，并设置边框为红色：

function clearText(){
 var mail=document.getElementById("email");
 if(mail.value=="请输入正确的电子邮箱"){
 mail.value="";
 mail.style.borderColor="#ff0000";
 }
}
……
 <td>Email：<input id="email" type="text" class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
 </tr>

2、当用户输入无效的电子邮件地址，Email文本框中的内容将被自动选中并且高亮显示，提示用户重新输入

if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
 alert("Email格式不正确\n必须包含符号@和.");
 document.getElementById("email").select();
 return false;
}

3、提示Email不能为空

function checkEmail(){
 var mail= document.getElementById ("email");
 var pID= document.getElementById ("pEmail");
 pID.innerHTML="";
 if(mail.value==""){
 pID.innerHTML="Email不能为空";
 return false;
 }
}
……
<input id="email" type="text" class="inputs" onblur="checkEmail()"/>
<p class="red" id="pEmail"></p>

id 设置或返回文本域的id

value 设置或返回文本域的value属性的值