JavaScript的Form常规验证写法
- 高洛峰原创
- 2016-11-25 11:39:091113浏览
<html>
<head><title>中信会员注册</title>
<link rel="stylesheet" type="text/css" href="http://www.php.cn/">
<link rel="stylesheet" type="text/css" href="http://www.php.cn/">
<link rel="stylesheet" type="text/css" href="http://www.php.cn/">
<script language="javascript" type="text/javascript">
//validateText onfocus onblur onchange 验证用户名
function validateText( value ){
//获取img对像 div
var img = document.getElementById( "img" );
var div = document.getElementById( "div" );
if( value.length < 1 ){ //验证失败
//alert( 用户名不能为空 );
img.src = "./img/invalid.gif";
img.style.display = ;
div.innerHTML = "用户名不能为空";
div.style.color = "red";
//设置焦点
document.csuinfo.username.focus();
return false;
}else{
//alert( 用户名验证成功 );
img.src = "./img/valid.gif";
img.style.display = ;
div.innerHTML = "用户名验证成功";
div.style.color = "blue";
return true;
}
}
//validatePassword
function validatePassword( value ){
//alert( value );
if( value.length <4 ){
alert("密码至少4位");
//设置焦点
document.csuinfo.password.focus();
return false;
}
var pattern = /^d*$/;//数字0个或多个
if (!pattern.test(value)) {//如是密码不为数字就输出
alert("密码只能为数字");
}
return true;
}
//confirmPassword
function confirmPassword( value ){
//
if( value != document.csuinfo.password.value ){
alert( "两次密码不致，请重新输入！" );
document.csuinfo.password2.focus();
return false;
}
return true;
}
//validateSex
function validateSex(){
var flag = true;
var sex = document.getElementsByName( "sex" );
//alert( sex.length );
for( i = 0; i < sex.length;i++ ){
//通过checked检查哪个单选是否被选中，
if( sex[i].checked ){
flag = false;
break;
}
}
if( flag ){
alert( "请选择你的性别!" );
return false;
}
return true;
}
//validateLike
function validateLike(){
var flag = true;
var like = document.getElementsByName( "like" );
//alert( like.length );
for( i = 0; i < like.length;i++ ){
//通过checked检查哪个单选是否被选中，
if( like[i].checked ){
flag = false;
break;
}
}
if( flag ){
alert( "请选择你的爱好!" );
return false;
}
return true;
}
//validateSelect
function validateSelect(){
var flag = true; //selected
var s = document.csuinfo.s;
//alert( s.length );
for( i = 0; i < s.length;i++ ){
//通过checked检查哪个单选是否被选中，
if( s[i].selected ){
flag = false;
break;
}
}
if( flag ){
alert( "请选择你的分会!" );
return false;
}
return true;
}
//提交当前页面的数据到目标资源处理 1:通过submit按钮提交 在form中通过onsubmit事件调用对应的验证方法 onsubmit="return onsubmit2()"
function submit2(){
//alert( "ffffff" );
if( validateLike() && validateSelect() ){//验证成功,调用方法验证，爱好与帮会的值是否选中
return true;
}
return false;
}
// 2：通过button提交 当前表单的submit元素的name属性值不能为submit
function submit3(){
//alert( "ffffff" );
if( validateLike() && validateSelect()&&validateSex() ){//验证成功
//获取当前的form对像
var form1 = document.csuinfo;
//修改form中的属性值
form1.action = "dynamicDoc.html";
form1.submit();//提交方法
return true;
}
return false;
}
//JS正则表达式 /^：开始 $/：结束 d：数字 D:非数字 w:数字，字母，下划线 W:与w相反
//[]:包含 {}：出现的次数 {2} 两次 {1,2}:至少一次，最多两次 .:任意字符
function validateAge( value ){
//alert( value );
var pattern = /^d$/;
//1:规则匹配内容
var flag = pattern.test( value );//验证成功返回true,验证失败返回false
flag = pattern.exec( value );//验证成功返回对应的值，验证失败返回null
//2:通过内容匹配规则
flag = value.match( pattern );//验证成功返回对应的值，验证失败返回null
flag = value.search( pattern );//验证成功返回0，验证失败返回-1
alert( flag );
}
</script>
</head>
<body>
<form name="csuinfo" action="obj.html" method="get" onSubmit="return submit2();">
<table align="center" border="2">
<caption>中信会员注册</caption>
<tr>
<td>用户名</td>
<td><input type="text" name="username" maxlength="5" size="9" onblur="validateText(this.value)"/>
<img id="img" src="./img/valid.gif" style="display: none" /><!--image标签主要是为了显示成功与否的图片,div标签用于显示成功与否的提示文字-->
<span id="div"></span>
</td>
</tr>
<tr>
<td>age</td>
<td><input type="text" name="age" maxlength="5" size="9" onblur="validateAge(this.value)"/>
</td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" onBlur="validatePassword( this.value )" /></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="password2" onBlur="confirmPassword( this.value )" /></td>
</tr>
<tr>
<td>性别</td>
<td>男：<input type="radio" name="sex" value="1" "/><!--name选一样，方便以后获取-->
女：<input type="radio" name="sex" value="0" "/>
</td>
</tr>
<tr>
<td>爱好</td>
<td>音乐：<input type="checkbox" name="like" value="1" /><!--name选一样，方便以后获取-->
体育：<input type="checkbox" name="like" value="2" />
游戏：<input type="checkbox" name="like" value="3" />
</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" name="file" value=111 />
</td>
</tr>
<tr>
<td>图片按钮</td> <!-- image 和img属性一样 作用和submit按钮一样-->
<td><input type="image" name="image" alt="提交" src="./gif/face.gif" />
</td>
</tr>
<tr>
<td>hidden</td>
<td><input type="hidden" name="flag" value="2" />
</td>
</tr>
<tr>
<td>button</td>
<td><input type="button" name="b" value="button" onClick="submit3();" />
</td>
</tr>
<tr>
<td>你想参加帮会</td>
<td> <select name="s" size="3" multiple>
<option value="1">斧头帮</option>
<option value="2">丐帮</option>
<option value="3">红花会</option>
<option value="4">天地会</option>
</select>
</td>
</tr>
<tr>
<td>自我简介</td>
<td><textarea name="info" rows="10" cols="25">
12345
</textarea>
</td>
</tr>
<tr>
<td>单独button</td>
<td><button type="reset">button2<img src="./gif/face.gif"/></button>
</td>
</tr>
<tr>
<td>操作</td>
<td><input type="submit" value="注册" />
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：JavaScript中的事件处理下一篇：JavaScript的事件机制