Javascript_06_表单验证（离开单项，输入框后提示信息）
2015-01-04 21:43
489 查看
Javascript_06_ 表单验证（离开单项，输入框后提示信息）
说明：对于必须输入的入力框，光标离开（使用 onblur方法）时进行检查。假如有错，红色的提示信息直接在该画面的这个输入框的后面显示出来，并把光标重新定向到这个输入框。
待解决问题：
① 内存泄漏问题：比如用户名没输入，离开用户名输入框时，画面上会给出提示警告信息；此时再点击密码输入框时，会导致 IE占用很大的内存，好像是内存泄漏了。
② 对于选择框的检查问题（上述方法是在从输入框离开时进行检查），对于选择框，我直接没有点击选择，又怎么检查呢？此问题扩展开来，假如用户直接没有将光标放入过必须输入项，那这一项的检查也就无从谈起了。极端些，假如用户什么也没有输入，就直接点击提交，这种检查机制就不会起作用。前面那个弹警告框的验证方式，虽然用户体验不太好，但是肯定能起作用。
这边只是先将这种用户体验比较好的检查机制的原理用代码表现一下，以下的这两个文件还需要改善。但这种用户体验比较好的检查机制是以后的发展方向，也是我们要努力的方向。
1. regcheckdata2.js
[javascript] view plaincopy
function checkdata() {
var ssn=form.username.value.toLowerCase();
if (!checkUserName(ssn)) return false; //用户名检查
var pwd1 = form.pwd.value;
if (!checkPassword1(pwd1)) return false; //密码1检查
var pwd2 = form.pwd2.value;
if (!checkPassword1(pwd2)) return false; //确认密码检查
//检查性别
if( !(form.sex[0].checked || form.sex[1].checked) ) {
alert("请选择性别!");
form.sex[0].focus();
return false;
}
//检查省份
if( form.province.selectedIndex == 0 ) {
alert("请选择省份!");
form.province.focus();
return false;
}
if(form.intro.value == "") {
alert("/自我介绍不能为空!");
form.intro.focus();
return false;
}
return true;
}
// 用户名检查
function checkUserName(ssn){
if( ssn.length<3 || ssn.length>18 ) {
document.getElementById("usernameErr").innerHTML = "<font color='red'>
请输入正确的用户名,用户名长度为3-18位！</font>";
form.username.focus()
return false;
}
if (isWhiteWpace(ssn)){
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名中不能包含空格！</font>";
form.username.focus()
return false;
}
if (!isSsnString(ssn)){
document.getElementById("usernameErr").innerHTML = "<font color='red'>对不起，您选择的用户名不正确或已被占用！用户名/n由a～z的英文字母(不区分大小写)、0～9的数字、点、减/n号或下划线组成，长度为3～18个字符，只能以数字或字母/n开头和结尾,例如:kyzy_001。</font>";
form.username.focus()
return false;
}
//输入正确的用户名后，将上次的错误提示信息清掉
document.getElementById("usernameErr").innerHTML = "";
return true;
}
//密码检查
function checkPassword1(pwd1) {
if( strlen(pwd1)<6 || strlen(pwd1)>16 ) {
//alert("/正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！</font>";
form.pwd.focus()
return false;
}
if( strlen2(pwd1) ) {
//alert("/您的密码中包含了非法字符，仅可用英文、数字、特殊字符！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>您的密码中包含了非法字符，仅可用英文、数字、特殊字符！</font>";
form.pwd.focus()
return false;
}
if( pwd1 == form.username.value ) {
//alert("/用户名和密码不能相同！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>密码和用户名不能相同！</font>";
form.pwd.focus()
return false;
}
document.getElementById("pwdErr").innerHTML = "";
return true;
}
//确认密码检查
function checkPassword2(pwd2) {
if( pwd2 =="" ) {
//alert("/请输入密码确认！")
document.getElementById("pwd2Err").innerHTML = "<font color='red'>请输入密码确认！</font>";
form.pwd2.focus()
return false;
}
if( pwd2 != form.pwd.value ) {
//alert("/两次密码输入不一致！")
document.getElementById("pwd2Err").innerHTML = "<font color='red'>两次密码输入不一致！</font>";
form.pwd2.focus()
return false;
}
document.getElementById("pwd2Err").innerHTML = "";
return true;
}
function strlen(str){
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
function strlen2(str){
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) return true;
}
return false;
}
function isWhiteWpace (s)
{
var whitespace = " /t/n/r";
var i;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (whitespace.indexOf(c) >= 0) {
return true;
}
}
return false;
}
function isSsnString (ssn)
{
var re=/^[0-9a-z][/w-.]*[0-9a-z]$/i;
if(re.test(ssn))
return true;
else
return false;
}
function checkssn(gotoURL) {
var ssn=form.username.value.toLowerCase();
if (checkUserName(ssn)){
var open_url = gotoURL + "?username=" + ssn;
window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');
}
}
2. userReg2.html
[javascript] view plaincopy
<html>
<head>
<title>表单</title>
<mce:script language=JavaScript src="script/regcheckdata.js" mce_src="script/regcheckdata.js"></mce:script>
<mce:script type="text/javascript"><!--
// --></mce:script>
</head>
<body>
<form name="form" action="01.html" method="get" onSubmit="return checkdata()">
<table width="750" align="center" border="2">
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
<span id="usernameErr"></span>//同一行（首选）
<!--<div id="usernameErr"></div>-->//另起一行
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type=password name="pwd" size="15" maxlength="12" onblur="checkPassword1(this.value)">
<span id="pwdErr"></span>
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input type=password name="pwd2" size="15" maxlength="12" onblur="checkPassword2(this.value)">
<span id="pwd2Err"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type=radio name="sex" value="male">男
<input type=radio name="sex" value="female">女
</td>
</tr>
<tr>
<td>你感兴趣</td>
<td>
<input type="checkbox" name="interest" value="vc" checked>VC
<input type="checkbox" name="interest" value="vb">VB
<input type="checkbox" name="interest" value="vfoxpro">VF
<input type="checkbox" name="interest" value="vjava">VJ
<br>
<input type="checkbox" name="interest" value="bc">BC
<input type="checkbox" name="interest" value="cobol">CO
<input type="checkbox" name="interest" value="java">JA
<input type="checkbox" name="interest" value="delphi">Delphi
</td>
</tr>
<!--必须选中JSP-->
<input type="hidden" name="interest" value="jsp">
<tr>
<td>你感兴趣</td>
<td>
<select name="interest2" size=8 multiple>
<option value="vc" selected>VC</option>
<option value="vb">VB</option>
<option value="vfoxpro">VF</option>
<option value="vjava">VJ</option>
<option value="bc">BC</option>
<option value="cobol">CO</option>
<option value="java">JA</option>
<option value="delphi">Delphi</option>
</select>
</td>
</tr>
<tr>
<td>你来自</td>
<td>
<select name="province">
<option value=0 selected>请选择</option>
<option value=34>安徽</option>
<option value=11>北京</option>
<option value=50>重庆</option>
<option value=35>福建</option>
<option value=62>甘肃</option>
<option value=44>广东</option>
<option value=45>广西</option>
<option value=52>贵州</option>
<option value=46>海南</option>
<option value=13>河北</option>
<option value=23>黑龙江</option>
<option value=41>河南</option>
<option value=42>湖北</option>
<option value=43>湖南</option>
<option value=32>江苏</option>
<option value=36>江西</option>
<option value=22>吉林</option>
<option value=21>辽宁</option>
<option value=64>宁夏</option>
<option value=15>内蒙古</option>
<option value=63>青海</option>
<option value=31>上海</option>
<option value=14>山西</option>
<option value=37>山东</option>
<option value=51>四川</option>
<option value=61>陕西</option>
<option value=12>天津</option>
<option value=54>西藏</option>
<option value=65>新疆</option>
<option value=53>云南</option>
<option value=33>浙江</option>
<option value=71>台湾</option>
<option value=81>香港</option>
<option value=82>澳门</option>
<option value=0>其他</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea rows="12" cols="80" name="intro">
说明：对于必须输入的入力框，光标离开（使用 onblur方法）时进行检查。假如有错，红色的提示信息直接在该画面的这个输入框的后面显示出来，并把光标重新定向到这个输入框。
待解决问题：
① 内存泄漏问题：比如用户名没输入，离开用户名输入框时，画面上会给出提示警告信息；此时再点击密码输入框时，会导致 IE占用很大的内存，好像是内存泄漏了。
② 对于选择框的检查问题（上述方法是在从输入框离开时进行检查），对于选择框，我直接没有点击选择，又怎么检查呢？此问题扩展开来，假如用户直接没有将光标放入过必须输入项，那这一项的检查也就无从谈起了。极端些，假如用户什么也没有输入，就直接点击提交，这种检查机制就不会起作用。前面那个弹警告框的验证方式，虽然用户体验不太好，但是肯定能起作用。
这边只是先将这种用户体验比较好的检查机制的原理用代码表现一下，以下的这两个文件还需要改善。但这种用户体验比较好的检查机制是以后的发展方向，也是我们要努力的方向。
1. regcheckdata2.js
[javascript] view plaincopy
function checkdata() {
var ssn=form.username.value.toLowerCase();
if (!checkUserName(ssn)) return false; //用户名检查
var pwd1 = form.pwd.value;
if (!checkPassword1(pwd1)) return false; //密码1检查
var pwd2 = form.pwd2.value;
if (!checkPassword1(pwd2)) return false; //确认密码检查
//检查性别
if( !(form.sex[0].checked || form.sex[1].checked) ) {
alert("请选择性别!");
form.sex[0].focus();
return false;
}
//检查省份
if( form.province.selectedIndex == 0 ) {
alert("请选择省份!");
form.province.focus();
return false;
}
if(form.intro.value == "") {
alert("/自我介绍不能为空!");
form.intro.focus();
return false;
}
return true;
}
// 用户名检查
function checkUserName(ssn){
if( ssn.length<3 || ssn.length>18 ) {
document.getElementById("usernameErr").innerHTML = "<font color='red'>
请输入正确的用户名,用户名长度为3-18位！</font>";
form.username.focus()
return false;
}
if (isWhiteWpace(ssn)){
document.getElementById("usernameErr").innerHTML = "<font color='red'>请输入正确的用户名,用户名中不能包含空格！</font>";
form.username.focus()
return false;
}
if (!isSsnString(ssn)){
document.getElementById("usernameErr").innerHTML = "<font color='red'>对不起，您选择的用户名不正确或已被占用！用户名/n由a～z的英文字母(不区分大小写)、0～9的数字、点、减/n号或下划线组成，长度为3～18个字符，只能以数字或字母/n开头和结尾,例如:kyzy_001。</font>";
form.username.focus()
return false;
}
//输入正确的用户名后，将上次的错误提示信息清掉
document.getElementById("usernameErr").innerHTML = "";
return true;
}
//密码检查
function checkPassword1(pwd1) {
if( strlen(pwd1)<6 || strlen(pwd1)>16 ) {
//alert("/正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！</font>";
form.pwd.focus()
return false;
}
if( strlen2(pwd1) ) {
//alert("/您的密码中包含了非法字符，仅可用英文、数字、特殊字符！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>您的密码中包含了非法字符，仅可用英文、数字、特殊字符！</font>";
form.pwd.focus()
return false;
}
if( pwd1 == form.username.value ) {
//alert("/用户名和密码不能相同！")
document.getElementById("pwdErr").innerHTML = "<font color='red'>密码和用户名不能相同！</font>";
form.pwd.focus()
return false;
}
document.getElementById("pwdErr").innerHTML = "";
return true;
}
//确认密码检查
function checkPassword2(pwd2) {
if( pwd2 =="" ) {
//alert("/请输入密码确认！")
document.getElementById("pwd2Err").innerHTML = "<font color='red'>请输入密码确认！</font>";
form.pwd2.focus()
return false;
}
if( pwd2 != form.pwd.value ) {
//alert("/两次密码输入不一致！")
document.getElementById("pwd2Err").innerHTML = "<font color='red'>两次密码输入不一致！</font>";
form.pwd2.focus()
return false;
}
document.getElementById("pwd2Err").innerHTML = "";
return true;
}
function strlen(str){
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
function strlen2(str){
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) return true;
}
return false;
}
function isWhiteWpace (s)
{
var whitespace = " /t/n/r";
var i;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (whitespace.indexOf(c) >= 0) {
return true;
}
}
return false;
}
function isSsnString (ssn)
{
var re=/^[0-9a-z][/w-.]*[0-9a-z]$/i;
if(re.test(ssn))
return true;
else
return false;
}
function checkssn(gotoURL) {
var ssn=form.username.value.toLowerCase();
if (checkUserName(ssn)){
var open_url = gotoURL + "?username=" + ssn;
window.open(open_url,'','status=0,directories=0,resizable=0,toolbar=0,location=0,scrollbars=0,width=322,height=200');
}
}
2. userReg2.html
[javascript] view plaincopy
<html>
<head>
<title>表单</title>
<mce:script language=JavaScript src="script/regcheckdata.js" mce_src="script/regcheckdata.js"></mce:script>
<mce:script type="text/javascript"><!--
// --></mce:script>
</head>
<body>
<form name="form" action="01.html" method="get" onSubmit="return checkdata()">
<table width="750" align="center" border="2">
<tr>
<td colspan="2" align="center">用户注册</td>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type=text name="username" size="30" maxlength="10" onblur="checkUserName(this.value.toLowerCase())">
<span id="usernameErr"></span>//同一行（首选）
<!--<div id="usernameErr"></div>-->//另起一行
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type=password name="pwd" size="15" maxlength="12" onblur="checkPassword1(this.value)">
<span id="pwdErr"></span>
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input type=password name="pwd2" size="15" maxlength="12" onblur="checkPassword2(this.value)">
<span id="pwd2Err"></span>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type=radio name="sex" value="male">男
<input type=radio name="sex" value="female">女
</td>
</tr>
<tr>
<td>你感兴趣</td>
<td>
<input type="checkbox" name="interest" value="vc" checked>VC
<input type="checkbox" name="interest" value="vb">VB
<input type="checkbox" name="interest" value="vfoxpro">VF
<input type="checkbox" name="interest" value="vjava">VJ
<br>
<input type="checkbox" name="interest" value="bc">BC
<input type="checkbox" name="interest" value="cobol">CO
<input type="checkbox" name="interest" value="java">JA
<input type="checkbox" name="interest" value="delphi">Delphi
</td>
</tr>
<!--必须选中JSP-->
<input type="hidden" name="interest" value="jsp">
<tr>
<td>你感兴趣</td>
<td>
<select name="interest2" size=8 multiple>
<option value="vc" selected>VC</option>
<option value="vb">VB</option>
<option value="vfoxpro">VF</option>
<option value="vjava">VJ</option>
<option value="bc">BC</option>
<option value="cobol">CO</option>
<option value="java">JA</option>
<option value="delphi">Delphi</option>
</select>
</td>
</tr>
<tr>
<td>你来自</td>
<td>
<select name="province">
<option value=0 selected>请选择</option>
<option value=34>安徽</option>
<option value=11>北京</option>
<option value=50>重庆</option>
<option value=35>福建</option>
<option value=62>甘肃</option>
<option value=44>广东</option>
<option value=45>广西</option>
<option value=52>贵州</option>
<option value=46>海南</option>
<option value=13>河北</option>
<option value=23>黑龙江</option>
<option value=41>河南</option>
<option value=42>湖北</option>
<option value=43>湖南</option>
<option value=32>江苏</option>
<option value=36>江西</option>
<option value=22>吉林</option>
<option value=21>辽宁</option>
<option value=64>宁夏</option>
<option value=15>内蒙古</option>
<option value=63>青海</option>
<option value=31>上海</option>
<option value=14>山西</option>
<option value=37>山东</option>
<option value=51>四川</option>
<option value=61>陕西</option>
<option value=12>天津</option>
<option value=54>西藏</option>
<option value=65>新疆</option>
<option value=53>云南</option>
<option value=33>浙江</option>
<option value=71>台湾</option>
<option value=81>香港</option>
<option value=82>澳门</option>
<option value=0>其他</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea rows="12" cols="80" name="intro">
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript 正则表达式验证表单信息（光标离开会判断是否符合规定，不符合会提示）
- JavaScript表单验证-不弹出窗口直接提示错误信息
- 表单的js验证框架，只提供提示信息及正则表达式即可自动验证及提示
- jsp 使用javascript验证时，提示信息出现乱码
- jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中
- Ext JS百强应用:Form验证、表单验证、表单错误提示信息位置 --第4强
- asp.ne如何使用javascript去验证客户端信息，如果验证成功则送往服务器端处理，否则在客户端提示用户（不返回到服务器端处理）
- javascript的onfocus和onblur事件实现输入框的提示信息显隐
- javascript 表单认证(1)弹窗提示认证信息
- 提交表单信息常用格式验证，防止冒泡，移动端避免键盘挡输入框，取消回退（持续更新）
- JavaScript基础 window.prompt() 弹出一个输入框 设置提示信息与默认值
- JavaScript验证页面控件值时的提示信息的定位
- 一个流行且实用的JS表单验证提示，演示了怎么自定义错误信息的显示方式，同时通过写FormValid.showError类方法来实现错误显示方式自定义： errMsg 是一个错误消息的数组，这样方便自定
- JavaScript基础 window.prompt() 弹出一个输入框 设置提示信息与默认值
- 题目：JavaScript编程题 页面上输入一个年份（需验证），判断是否是闰年（能被4整除却不能被100整除的年份;能被400整除的是闰年），需在页面上显示提示信息
- jquery插件-表单验证插件-提示信息中文化与定制提示信息
- Struts2表单验证中使用OGNL提示错误信息
- [原创] [WEB/JavaScript] 用JavaScript实现自定义控件 --- (1)显示提示信息的输入框
- #学习笔记#(4)输入框提示信息不能为空--JavaScript改变CSS样式
- jQuery标签式表单验证提示（警告）信息