表单验证
Posted guoDaXia的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单验证相关的知识，希望对你有一定的参考价值。
表单对象
document.getElementById();
document.forms.username
document.frm1.username
本身表单有的属性，都可以是对象的属性
action
method
enctype
title
submit()
focus() 得到焦点事件
blur() 失去焦点
change() 内容改变事件
form里面的onsubmit()为真提交，为假提交失败，使用了这个之后，提交按钮触发onsubmit()
<html> <head> </head> <body> <form name="frm" action="02.html" method="post"> username:<input type="text" name="username" value=""><br/> password:<input type="password" name="password" value=""><br/> <input type="submit" name="submit_1" value="提交"> </form> </body> <script> function test(){ var frnobj=document.frm; frnobj.action="index.jsp"; frnobj.target="_blank"; frnobj.method="get"; //frnobj.submit(); 这个地方会发生冲突错误，因为submit有这个属性在表单中 frnobj.submit(); } setTimeout("test()",10000); </script> </html>
<html>
<head>
</head>
<body>
<form name="frm" onsubmit="return check()" action="01.html" method="post">
username:<input type="text" name="username" value=""><br/>
password:<input type="password" name="password" value=""><br/>
<input type="submit" name="submit_2" value="Login">
<!--onclick="return false;" -->
<!-- 想要提交按钮失效，想办法使得该按钮返回false即可
在使用按钮提交的时候实质上要给onsubmit属性赋值,默认点击提交按钮return true值赋给onsubmit属性，我们可以设置直接设置onsubmit属性submit按钮就会失去效果来完成表单验证
-->
</form>
</body>
<script>
var frnobj=document.frm;
function check(){
//if(document.frm.username.value==null || document.frm.username.value==""){//前面的value是"",无语
//如果我希望使用信息弹出所有不符合的信息
var info="";
var status=true;
if(!document.frm.username.value.match(/^\\S+$/)){
//alert("用户名不能为空");
//document.frm.username.focus();
info+="用户名不能为空";
//return false;
status=false;
}else if(!document.frm.password.value.match(/^\\S+$/)){
//(document.frm.password.value==null || document.frm.password.value==""){
//alert("密码不能为空");
//document.frm.password.focus();
info+="密码不能为空";
//return false;
status=false;
}
if(!status){
alert(info);
}
return status;
//其实前面的验证是有漏洞的，如果我输入的是多个空格的话，会通过，其实验证表单最好的方式是正则表达式
}
//frnobj.submit();//这个注意表单中控件的命名
</script>
</html>
<html>
<head>
</head>
<body>
<form name="frm" method="post" onSubmit="return check()" action="02.html" >
username:<input type="text" name="username" value="" onblur="notnull(this)"><br/>
password:<input type="password" name="password" value="" onblur="notnull(this)"><br/>
<input type="submit" name="submit_1" >
</form>
</body>
<script>
var ck=true;
function notnull(obj){
if(!obj.value.match(/^\\S+$/)){
if(obj.name=="username"){
//document.frm.username.focus();
alert("用户名不能为空");
}else if(obj.name=="password"){
//document.frm.password.focus();
alert("密码不能为空");
}
//obj.focus();火符宝箱不兼容鼠标得到焦点事件然后如果这样得到焦点先点击密码框不给值会造成死锁
ck=false;
}
}
function check(){
return ck;
}
</script>
</html>
<html>
<head>
<script src="check.js"></script>
<style>
span{
font-size:12px;
}
.stats1{
color:#aaa; <!-- 默认灰色 -->
}
.stats2{
color:#000;
}
.stats3{
color:red;
}
.stats4{
color:green;
}
</style>
</head>
<body>
<form action="" method="" onsubmit="return regs(\'submit\')">
username:<input type="text" name="username" value="">
<span class="stats1">请输入用户名</span><br/>
password:<input type="password" name="password" value="">
<span class="stats1">请输入密码</span><br/>
repass:<input type="password" name="repass" value="">
<span class="stats1">请再次输入密码</span></br/>
email:<input type="text" name="email" value="">
<span class="stats1">请输入邮箱</span><br/>
other:<input type="text" name="other" value="">
<span class="stats1">请输入其他</span><br/>
<input type="submit" name="sub" value="submit">
</form>
</body>
</html>
//页面加载完自动调用
onload=regs;
//一个函数，可以使用onsubmit调用，也可以使用onload调用
function regs(subm){//我们直接提交表单不会验证，怎么解决呢？我们需要让函数进行判断，直接点击提交的时候得到一个信号，所有验证都执行，使用参数
var stat=true;
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
var other=document.getElementsByName("other")[0];
//为了省代码，使用下一个同胞获取span
//alert(username.nextSibling.nodeName);/前面这种方式有可能控件后面是空格或者图片，所以我们使用一个小算法得到span
//alert(gspan(username).nodeName);
check(username,"用户名的长度要在3-20之间",function(val){
//if(val.match(/^\\S+$/) && val.length>=3 &&username.value.length<=20){
if(val.match(/^\\S{3,20}$/)){
return true;
}else{
stat=false;
return false;
}
},subm);
check(password,"密码必须在6-20位之间",function(val){
//if(val.match(/^\\S+$/) && val.length>=6 &&val.length<=20){
if(val.match(/^\\S{6,20}$/)){
return true;
}else{
stat=false;
return false;
}
},subm);
check(repass,"确认密码要和上面一致，规则也要相同",function(val){
//if(val.match(/^\\S+$/) && val.length>=6 &&val.length<=20 && val==password.value ){
if(val.match(/^\\S{3,20}$/) && val==password.value ){
return true;
}else{
stat=false;
return false;
}
},subm);
check(email,"要按邮箱规则输入",function(val){
if(val.match(/\\w+@\\w+\\.\\w+/)){
return true;
}else{
stat=false;
return false;
}
},subm);
return stat;
}
function gspan(cobj){//找到下一个span
while(true){
if(cobj.nextSibling.nodeName!="SPAN"){
cobj=cobj.nextSibling;
}else{
return cobj.nextSibling;
}
}
}
/*
通用检查方法：
第一个参数：obj，用来检查的对象
第二个参数：info，用来检查的提示信息
第三个参数：fun，用来检查值是否按条件输入
第四个参数：subm，状态判定，分清是点击提交还是失去焦点
*/
function check(obj,info,fun,subm){
var sp=gspan(obj);
obj.onfocus=function(){//得到焦点提示
//var sp=gspan(username);
sp.innerHTML=info
sp.className="stats2";
}
obj.onblur=function(){
//if(username.value.match(/^\\S+$/) && username.value.length>=3 &&username.value.length<=20){
if(fun(this.value)){
sp.innerHTML="输入正确";
sp.className="stats4";
}else{
sp.innerHTML=info;
sp.className="stats3";
}
}
if(subm=="submit"){
obj.onblur();
}
}
以上是关于表单验证的主要内容，如果未能解决你的问题，请参考以下文章
原生JavaScript判断是否为邮箱危险字符验证长度验证网址验证小数整数浮点数等常用的验证
ajaxFileUpload上传带参数文件及JS验证文件大小
SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段