表单验证技术
本章目标
- 使用表单事件和脚本函数实现表单验证
- 使用字符串对象和文本框控件常用属性和方法实现客户端验证
什么时候需要表单验证
- 减轻服务器的压力
- 保证输入的数据符合要求
表单验证的内容
- 日期是否有效或日期格式是否正确
- 表单元素是否为空
- 用户名和密码
- 电子邮箱地址是否正确
- 身份证号码等是否是数字
表单验证思路
- 当输入的表单数据不符合要求时,如何编写脚本来进行提示?
- 获得表单元素值
- 使用的JavaScript的一些方法对数据进行判断
- 当表单提示时,触发onsubmit事件,对获取的数据进行验证
字符串对象
- length属性获取字符串长度
var str = "this is javascript";
str.length;
- toLowerCase()把字符串转化为小写
- toUpperCase()把字符串转化为大写
- charAt(index)返回在指定位置的字符
- indexOf(字符串,索引)查找某个指定的字符串值在字符串中首次出现的位置
- substring(index1,index2)返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符
var str = "this is javascript";
console.info(str.toLowerCase());
console.info(str.toUpperCase());
console.info(str.charAt(2));
console.info(str.indexOf("i"));
console.info(str.substring(2,4));
电子邮件邮箱格式验证
思路分析
- 使用的getElementById()获取电子邮件的值
- 使用字符串方法indexOf()判断Email的值是否包含“@”和“。”符号。
- 根据函数返回值是真还是FLASE来决定是否提交表单
<form onsubmit="return validation();">
邮箱地址<input id="email" type="text">
<input type="submit" value="提交">
</form>
function validation() {
var email = document.getElementById("email");
if (email.value.indexOf("@") == -1) {
alert("请输入正确的邮箱地址");
return false;
} else {
return true;
}
}
文本框内容验证
- 姓名不能为空,并且姓名中不能有数字
- 密码不能为空,并且密码包含的字符不能少于6个
- 两次输入的密码必须一致
- 密码长度必须为6位
姓名中不能有数字
var name = document.getElementById("name").value;
for(var i=0;i<name.length;i++){
var j=name.substring(i,i+1)
if(j>=0){
alert("姓名中不能包含数字");
return false;
}
}
密码不能少于6位
var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
alert("密码必须等于或大于6个字符");
return false;
}
验证两次密码是否一致
var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
alert("两次输入的密码不一致");
return false;
}
小结
实现表单注册功能验证,需要验证以下内容
- 用户名是否为空,不能少于4个字符,不能大于16个字符
- 密码是否为空,不能少于6位,两次密码是否相等
- 邮箱是否为空,是否格式正确是否所有游戏
@
状语从句:.
符号 - 备注内容是否为空
文本框效果
- 如何实现以下图片效果,用户点击邮箱文本框,文本框内容提示信息自动消失
思路:使用文本框对象的相关属性,事件和方法实现此效果
文本框对象的方法和事件
类别 | 名称 | 描述 |
---|---|---|
事件 | 的onblur | 失去焦点,当光标离开某个文本框时触发 |
事件 | 聚焦状态 | 获得焦点,当光标进入某个文本框时触发 |
事件 | onkeypress事件 | 某个键盘按键被按下并松开 |
方法 | 模糊() | 从文本域中移开焦点 |
方法 | 焦点() | 在文本域中设置焦点,即获得鼠标光标 |
方法 | 选择() | 选取文本域中的内容 |
属性 | ID | 设置或返回文本域的ID |
属性 | 值 | 设置或返回文本域的值属性的值 |
制作文本框中初始的内容
<form onsubmit="return validation();">
<table>
<tr>
<td>邮箱地址</td>
<td><input id="email" type="text" value="请输入正确的电子邮箱" onfocus="clearText()"></td>
</tr>
<tr>
<td>密码</td>
<td><input id="name" type="text"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
function clearText() {
var mail=document.getElementById("email");
if(mail.value=="请输入正确的电子邮箱"){
mail.value="";
mail.style.borderColor="#ff0000";
}
}
制作文本框效果-2
当用户输入无效的电子邮件地址,电子邮件文本框中的内容将被自动选中并且高亮显示,提示用户重新输入
<input id="email" type="text" class="inputs" onblur="checkEmail()"/>
<div class="red" id="DivEmail"></div>
function checkEmail(){
var mail= document.getElementById ("email");
var divID= document.getElementById ("DivEmail");
divID.innerHTML="";
if(mail.value==""){
divID.innerHTML="Email不能为空";
return false;
}
}
布置作业
- 为什么需要表单验证?
- 常用的表单验证主要包括哪些内容?
- 简述表单验证的大致思路?
- 如何验证电子邮件格式是否正确?(代码实现)
- 简要说明文本框对象的常用属性,方法和事件?