JS文件
//字符串不能为空 function valid_value (str) { if(str==null || str==""){ return false; }else{ return true; } } //字符必须是字母、数字或下划线 function valid_char (char) { if((char>='A' && char<='Z') || (char>='a' && char<='z') || (char>='0' && char<='9') || char=='_'){ return true; } return false; } //字符串必须是字母、数字或下划线 function valid_string (str) { var i; for(i=0;i<str.length;i++){ if(!valid_char(str.substr(i,1))){ return false; } } return true; } //字符串首字符不能为数字 function valid_first_character (str) { var ch=str.charAt(0); if(ch>='0' && ch<='9'){ return false; }else{ return true; } } //字符串的长度必须在min和max之间 function valid_string_len (str,min,max) { if(str.length>=min && str.length<=max){ return true; }else{ return false; } } //判断两个字符串相等 function valid_equal (str1,str2) { if(str1==str2) { return true; }else{ return false; } } //判断email地址是否合法 function valid_email (email) { var posAt=email.indexOf("@"); var posDot=email.lastIndexOf("."); if(posAt!=-1 && posDot!=-1 && posDot-posAt>=2){ return true; }else{ return false; } } //给指定ID的控件设置显示文字 function set_err_info (span_id,str) { var span1=document.getElementById(span_id); span1.innerHTML=str; }
html文件
<html> <head> <meta charset="utf-8"> <title>项目1 表单数据验证</title> <style type="text/css"> span{ color: red; } </style> <script type="text/javascript" src="check.js"> </script> <script type="text/javascript"> function valid_user () { if(!valid_value(myform.user_name.value)){ set_err_info('span_user_err','用户名不能为空!'); return false; } if(!valid_first_character(myform.user_name.value)){ set_err_info('span_user_err','用户名首字符不能为数字!'); return false; } if(!valid_string_len(myform.user_name.value,6,12)){ set_err_info('span_user_err','用户名长度应该在6~12!'); return false; } if(!valid_string(myform.user_name.value)){ set_err_info('span_user_err','用户名必须由字母、数字或下划线组成!'); return false; } set_err_info('span_user_err',''); return true; } function valid_pwd1 () { if(!valid_value(myform.pwd1.value)){ set_err_info('span_pwd1_err','密码不能为空!'); return false; } if(!valid_string_len(myform.pwd1.value,6,12)){ set_err_info('span_pwd1_err','密码长度应该在6~12!'); return false; } if(!valid_string(myform.pwd1.value)){ set_err_info('span_pwd1_err','密码必须由字母、数字或下划线组成!'); return false; } set_err_info('span_pwd1_err',''); return true; } function valid_pwd2 () { if(!valid_equal(myform.pwd1.value,myform.pwd2.value)){ set_err_info('span_pwd2_err','两次输入的密码不一致!'); return false; } set_err_info('span_pwd2_err',''); return true; } function valid_email1 () { if(!valid_value(myform.email.value)){ set_err_info('span_email_err','email不能为空!'); return false; } if(!valid_email(myform.email.value)){ set_err_info('span_email_err','email地址不正确!'); return false; } set_err_info('span_email_err',''); return true; } </script> </head> <body> <form name="myform"> <table> <tr> <td>用户名:</td> <td><input type="text" name="user_name" onblur="valid_user();" ></td> <td><span id="span_user_err"></span></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd1" onblur="valid_pwd1();" ></td> <td><span id="span_pwd1_err"></span></td> </tr> <tr> <td>重复密码:</td> <td><input type="password" name="pwd2" onblur="valid_pwd2();" ></td> <td><span id="span_pwd2_err"></span></td> </tr> <tr> <td>电子邮件:</td> <td><input type="text" name="email" onblur="valid_email1();" ></td> <td><span id="span_email_err"></span></td> </tr> </table> </form> </body> </html>