집 > 기사 > 웹 프론트엔드 > 양식 항목이 비어 있는지 확인하는 JavaScript 양식 유효성 검사 예_javascript 기술

양식 항목이 비어 있는지 확인하는 JavaScript 양식 유효성 검사 예_javascript 기술

WBOY원래의: 2016-05-16 15:20:371152검색

등록이나 로그인이 필요한 거의 모든 웹사이트에서는 양식 확인이 필수적입니다. 일부 확인은 매우 복잡하고 다양한 요구 사항이라고 할 수 있습니다. 그러나 이 장에서는 확인 방법 중 가장 간단한 방법만 소개합니다. 비어 있습니다. 요구 사항이 낮은 일부 웹 사이트는 이미 이러한 요구 사항을 충족했습니다.

코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.jb51.net/" /> 
<title>js简单表单验证</title> 
<script type="text/javascript">
window.onload=function()
{
var bt=document.getElementById("bt");
bt.onclick=function()
{
if(document.myform.name.value=="")
{
alert("用户名不能为空!");
document.myform.name.focus();
return false;
} 
else if(document.myform.pw.value=="")
{
alert("密码不能为空!");
document.myform.pw.focus();
return false; 
}
}
}
</script>
</head>
<body>
<form action="index.php" method="get" name="myform">
<ul>
<li>姓名:<input type="text" name="name" id="name" /></li>
<li>密码:<input type="text" name="pw" id="age" /></li>
<li><input type="submit" id="bt"/></li>
</ul> 
</form>
</body>
</html>

위 코드는 제출 버튼을 클릭할 때 간단한 양식 확인을 수행할 수 있습니다. 양식 항목이 비어 있으면 프롬프트가 나타나고 현재 양식 항목에 초점이 맞춰집니다. 코드는 비교적 간단하며 그렇지 않습니다. 여기에서 소개하면 관련 자료를 참조할 수 있습니다.

js 확인 양식 예시 코드를 살펴보겠습니다.

gspan.html

 <html>
 <head>
 <title>表单验证实例</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-" />
 <script src="check.js" type="text/javascript"></script>
 <style>
 span{ font-size:px; }
 .stats{ color : #ccc; }
 .stats{ color :black; }
 .stats{ color :red; }
 .stats{ color :green; }
 </style>
 </head>
 <body>
 <form method="post" action="reg.php" onsubmit="return regs('click')" >
 用户名：<input type="text" name="username" /><span class="stats">用户名不能为空</span><br/>
 邮箱：<input type="text" name="email" /><span class="stats">邮箱不能为空</span><br/>
 密码：<input type="password" name="password" /><span class="stats">密码不能为空</span><br/> 
 确认密码：<input type="password" name="chkpass" /><span class="stats">密码不能为空</span><br/>
 <input type="submit" />
 </form>
 </body>
 </html>

check.js

function gspan(cobj){ //获取表单后的span 标签 显示提示信息
if (cobj.nextSibling.nodeName != 'SPAN'){ 
gspan(cobj.nextSibling); 
} else { 
return cobj.nextSibling;
}
} 
//检查表单 obj【表单对象】， info【提示信息】 fun【处理函数】 click 【是否需要单击， 提交时候需要触发】 
function check(obj, info, fun, click){ 
var sp = gspan(obj); 
obj.onfocus = function(){ 
sp.innerHTML = info; 
sp.className = 'stats';
}
obj.onblur = function(){
if (fun(this.value)){
sp.innerHTML = "输入正确！";
sp.className = "stats";
} else {
sp.innerHTML = info;
sp.className = "stats";
}
}
if (click == 'click'){
obj.onblur();
}
}
onload = regs; //页面载入完执行
function regs(click){
var stat = true; //返回状态， 提交数据时用到
username = document.getElementsByName('username')[];
password = document.getElementsByName('password')[];
chkpass = document.getElementsByName('chkpass')[];
email = document.getElementsByName('email')[];
check(username, "用户名的长度在-之间", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <=){
return true;
} else {
stat = false;
return false;
}
}, click);
check(password, "密码必须在-位之间", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <=){
return true;
} else {
stat = false;
return false;
}
}, click);
check(chkpass, "确定密码要和上面一致，规则也要相同", function(val){
if (val.match(/^\S+$/) && val.length >= && val.length <= && val == password.value){
return true;
} else {
stat = false;
return false;
}
}, click);
check(email, "请按邮箱规则输入", function(val){
if (val.match(/\w+@\w+\.\w/)){
return true;
} else {
stat = false;
return false;
}
}, click);
return stat;
}

성명：

이전 기사：Ajax request_jquery를 시뮬레이션하는 jQuery Mockjax 플러그인의 자세한 예다음 기사：Ajax request_jquery를 시뮬레이션하는 jQuery Mockjax 플러그인의 자세한 예

양식 항목이 비어 있는지 확인하는 JavaScript 양식 유효성 검사 예_javascript 기술

관련 기사