简单的表单验证
A.两种验证方式:
1.在表单提交时进行验证,sumbit时
2.在表单控件失去焦点时进行验证
表单验证逻辑一般写在表单提交之前,html5也新增了表单验证形式,表单验证可以使用正则表达式
B.表单验证一些必需的验证项目:
1.用户是否填写表单中必填项目
2.用户是否已经输入合法的日期
3.用户是否已经输入合法的邮件地址
4.用户是否已经在数据域(numeric field)中输入合法的文本
等等
C.如果表单相应的项目并没有填好的话,那么我们需要弹出一个警示框。有以下几种情况:1.用户此行内容未填写,想跳过此行,先去填写下面的内容,需要在表单提交时,提醒用户有表单未填写完毕,不能被提交,并将光标移至相应处2.此行内容未填写完毕,不能跳过,光标不能移动,此种方式交互性能不是特别好,不推荐使用
下面是一个简单的数字名用户表单验证:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单表单验证</title>
</head>
<body>
<form action="#">
<table>
<tr>
<td>姓名:</td>
<td><input type="text" name="txtName" id="textName" placeholder="文本不能少于6个数字"></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
<script>
window.οnlοad=function(){
//先拿到我们的表单
var frm=document.forms[0];
//用户名的长度如果发生错误,我们要在该行内容后面给其加一个内容,提示用户填写错误,并把相应的错误内容框加红
var textNameMag=document.createElement('span');
textNameMag.innerHTML="姓名的长度必须在6到15个数字之间";
textNameMag.style.color="red";
//在表单进行提交时,必须要进行验证
frm.οnsubmit=function(e){
//获取文本框的内容
var txtContent=document.getElementById('textName');
//写一个正则表达式,你填入的数字必须在6到15之间
var txtContentRegExp=/\w{6,15}/gi;
if(txtContentRegExp.test(txtContent.value)){
//此处成功,删除我们错误的文本消息框
txtContent.parentNode.removeChild(textNameMag);
return true;
}else{
//检验失败,用户填入的文本不符合要求
txtContent.parentNode.appendChild(textNameMag);return false;
}
}
}
</script>
</body>
</html>
实现效果如下: