使用JavaScript完成表单的校验
程序员文章站
2022-06-17 08:20:16
完成表单的校验 需求分析 昨天我们做了一个简单的表单校验,每当用户输入出错的时候,我们是弹出了一个对话框,提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改,当用户输入信息有问题的时候,我们就再输入框的后面给他一个友好提示。 技术分析 【HTML中innerHTML ......
完成表单的校验
需求分析
昨天我们做了一个简单的表单校验,每当用户输入出错的时候,我们是弹出了一个对话框,提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改,当用户输入信息有问题的时候,我们就再输入框的后面给他一个友好提示。
技术分析
【html中innerhtml属性】
【js中的常用事件】
onfocus : 获得焦点(鼠标光标位置)事件
onblur : 失去焦点(鼠标光标位置)事件
onkeyup : 按键抬起事件
代码实现
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入外部的js文件 --> <script type="text/javascript" src="../js/regutils.js" ></script> <script> /* 1. 确定事件 : onfocus 2. 事件要驱动函数 3. 函数要干一些事情: 修改span的内容 */ function showtips(spanid,msg){ //首先要获得要操作元素 span var span = document.getelementbyid(spanid); span.innerhtml = msg; } /* 校验用户名: 1.事件: onblur 失去焦点 2.函数: checkusername() 3.函数去显示校验结果 */ function checkusername(){ //获取用户输入的内容 var uvalue = document.getelementbyid("username").value; //对输入的内容进行校验 //获得要显示结果的span var span = document.getelementbyid("span_username"); if(uvalue.length < 6){ //显示校验结果 span.innerhtml = "<font color='red' size='2'>对不起,太短</font>"; return false; }else{ span.innerhtml = "<font color='red' size='2'>恭喜您,可用</font>"; return true; } } /* 密码校验 */ function checkpassword(){ //获取密码输入 var upass = document.getelementbyid("password").value; var span = document.getelementbyid("span_password"); //对密码输入进行校验 if(upass.length < 6){ span.innerhtml = "<font color='red' size='2'>对不起,太短</font>"; return false; }else{ span.innerhtml = "<font color='red' size='2'>恭喜您,够用</font>"; return true; } } /* 确认密码校验 * */ function checkrepassword(){ //获取密码输入 var upass = document.getelementbyid("password").value; //获取确认密码输入 var urepass = document.getelementbyid("repassword").value; var span = document.getelementbyid("span_repassword"); //对密码输入进行校验 if(upass != urepass){ span.innerhtml = "<font color='red' size='2'>对不起,两次密码不一致</font>"; return false; }else{ span.innerhtml = ""; return true; } } /* 校验邮箱 * */ function checkmail(){ var umail = document.getelementbyid("email").value; var flag = checkemail(umail); var span = document.getelementbyid("span_email"); //对邮箱输入进行校验 if(flag){ span.innerhtml = "<font color='red' size='2'>恭喜您,可用</font>"; return true; }else{ span.innerhtml = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>"; return false; } } function checkform(){ var flag = checkusername() && checkpassword() && checkrepassword() && checkmail(); return flag; } </script> </head> <body> <form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkform()" > 用户名:<input type="text" id="username" onfocus="showtips('span_username','用户名长度不能小于6')" onblur="checkusername()" onkeyup="checkusername()" /><span id="span_username"></span><br /> 密码:<input type="password" id="password" onfocus="showtips('span_password','密码长度不能小于6')" onblur="checkpassword()" onkeyup="checkpassword()"/><span id="span_password"></span><br /> 确认密码:<input type="password" id="repassword" onfocus="showtips('span_repassword','两次密码必须一致')" onblur="checkrepassword()" onkeyup="checkrepassword()" /><span id="span_repassword"></span><br /> 邮箱:<input type="text" id="email" onfocus="showtips('span_email','邮箱格式必须正确')" onblur="checkmail()" /><span id="span_email"></span><br /> 手机号:<input type="text" id="text" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
导入的js
/* 用途:检查输入的email信箱格式是否正确 输入:stremail:字符串 返回:如果通过验证返回true,否则返回false */ function checkemail(stremail) { var emailreg = /^([a-za-z0-9_-])+@([a-za-z0-9_-])+(\.[a-za-z0-9_-])+/; if ( emailreg.test(stremail) ) { return true; } else { // alert("您输入的email地址格式不正确!"); return false; } }; /* 用途:校验ip地址的格式 输入:strip:ip地址 返回:如果通过验证返回true,否则返回false; */ function isip(strip) { if (isnull(strip)) { return false; } var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ //匹配ip地址的正则表达式 if (re.test(strip)) { if ( regexp.$1 < 256 && regexp.$2 < 256 && regexp.$3 < 256 && regexp.$4 < 256) { return true; } } return false; }; /* 用途:检查输入手机号码是否正确 输入:strmobile:字符串 返回:如果通过验证返回true,否则返回false */ function checkmobile( strmobile ) { //13588888888 var regu = /^[1][345678][0-9]{9}$/; var re = new regexp(regu); if (re.test(strmobile)) { return true; } else { return false; } }; /* 用途:检查输入的电话号码格式是否正确 输入:strphone:字符串 返回:如果通过验证返回true,否则返回false */ function checkphone( strphone ) { var phoneregwitharea = /^[0][1-9]{2,3}-[0-9]{5,10}$/; var phoneregnoarea = /^[1-9]{1}[0-9]{5,8}$/; var prompt = "您输入的电话号码不正确!" if ( strphone.length > 9 ) { if ( phoneregwitharea.test(strphone) ) { return true; } else { alert( prompt ); return false; } } else { if ( phoneregnoarea.test( strphone ) ) { return true; } else { alert( prompt ); return false; } } }; /* 用途:检查输入字符串是否为空或者全部都是空格 输入:str 返回:如果全是空返回true,否则返回false */ function isnull( str ) { if ( str == "" ) { return true; } var regu = "^[ ]+$"; var re = new regexp(regu); return re.test(str); }; /* 用途:检查输入对象的值是否符合整数格式 输入:str 输入的字符串 返回:如果通过验证返回true,否则返回false */ function isinteger( str ) { var regu = /^[-]{0,1}[0-9]{1,}$/; return regu.test(str); }; /* 用途:检查输入字符串是否符合正整数格式 输入:s:字符串 返回:如果通过验证返回true,否则返回false */ function isnumber( s ) { var regu = "^[0-9]+$"; var re = new regexp(regu); if (s.search(re) != - 1) { return true; } else { return false; } }; /* 用途:检查输入字符串是否是带小数的数字格式,可以是负数 输入:str:字符串 返回:如果通过验证返回true,否则返回false */ function isdecimal( str ) { if (isinteger(str)) { return true; } var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/; if (re.test(str)) { if (regexp.$1 == 0 && regexp.$2 == 0) { return false; } return true; } else { return false; } }; /* 用途:检查输入对象的值是否符合端口号格式 输入:str 输入的字符串 返回:如果通过验证返回true,否则返回false */ function isport( str ) { return (isnumber(str) && str < 65536); }; /* 用途:检查输入字符串是否符合金额格式,格式定义为带小数的正数,小数点后最多三位 输入:s:字符串 返回:如果通过验证返回true,否则返回false */ function ismoney( s ) { var regu = "^[0-9]+[\.][0-9]{0,3}$"; var re = new regexp(regu); if (re.test(s)) { return true; } else { return false; } }; /* 用途:检查输入字符串是否只由英文字母和数字和下划线组成 输入:s:字符串 返回:如果通过验证返回true,否则返回false */ function isnumberor_letter( s ) { //判断是否是数字或字母 var regu = "^[0-9a-za-z\_]+$"; var re = new regexp(regu); if (re.test(s)) { return true; } else { return false; } }; /* 用途:检查输入字符串是否只由英文字母和数字组成 输入:s:字符串 返回:如果通过验证返回true,否则返回false */ function isnumberorletter( s ) { //判断是否是数字或字母 var regu = "^[0-9a-za-z]+$"; var re = new regexp(regu); if (re.test(s)) { return true; } else { return false; } }; /* 用途:检查输入字符串是否只由汉字、字母、数字组成 输入:s:字符串 返回:如果通过验证返回true,否则返回false */ function ischinaornumborlett( s ) { //判断是否是汉字、字母、数字组成 var regu = "^[0-9a-za-z\u4e00-\u9fa5]+$"; var re = new regexp(regu); if (re.test(s)) { return true; } else { return false; } }; /* 用途:判断是否是日期 输入:date:日期;fmt:日期格式 返回:如果通过验证返回true,否则返回false */ function isdate( date, fmt ) { if (fmt == null) { fmt = "yyyymmdd"; } var yindex = fmt.indexof("yyyy"); if (yindex ==- 1) { return false; } var year = date.substring(yindex, yindex + 4); var mindex = fmt.indexof("mm"); if (mindex ==- 1) { return false; } var month = date.substring(mindex, mindex + 2); var dindex = fmt.indexof("dd"); if (dindex ==- 1) { return false; } var day = date.substring(dindex, dindex + 2); if (!isnumber(year) || year > "2100" || year < "1900") { return false; } if (!isnumber(month) || month > "12" || month < "01") { return false; } if (day > getmaxday(year, month) || day < "01") { return false; } return true; }; function getmaxday(year, month) { if (month == 4 || month == 6 || month == 9 || month == 11) { return "30"; } if (month == 2) { if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { return "29"; } else { return "28"; } return "31";; } }; /* 用途:字符1是否以字符串2结束 输入:str1:字符串;str2:被包含的字符串 返回:如果通过验证返回true,否则返回false */ function islastmatch(str1, str2) { var index = str1.lastindexof(str2); if (str1.length == index + str2.length) { return true; } return false; }; /* 用途:字符1是否以字符串2开始 输入:str1:字符串;str2:被包含的字符串 返回:如果通过验证返回true,否则返回false */ function isfirstmatch(str1, str2) { var index = str1.indexof(str2); if (index == 0) { return true; } return false; }; /* 用途:字符1是包含字符串2 输入:str1:字符串;str2:被包含的字符串 返回:如果通过验证返回true,否则返回false */ function ismatch(str1, str2) { var index = str1.indexof(str2); if (index ==- 1) { return false; } return true; }; /* 用途:检查输入的起止日期是否正确,规则为两个日期的格式正确,且结束如期>=起始日期 输入:startdate:起始日期,字符串; enddate:结束如期,字符串 返回:如果通过验证返回true,否则返回false */ function checktwodate( startdate, enddate ) { if ( !isdate(startdate) ) { alert("起始日期不正确!"); return false; } else if ( !isdate(enddate) ) { alert("终止日期不正确!"); return false; } else if ( startdate > enddate ) { alert("起始日期不能大于终止日期!"); return false; } return true; }; /* 用途:检查复选框被选中的数目 输入:checkboxid:字符串 返回:返回该复选框中被选中的数目 */ function checkselect( checkboxid ) { var check = 0; var i = 0; if ( document.all(checkboxid).length > 0 ) { for ( i = 0; i < document.all(checkboxid).length; i++ ) { if ( document.all(checkboxid).item( i ).checked ) { check += 1; } } } else { if ( document.all(checkboxid).checked ) { check = 1; } } return check; } function gettotalbytes(varfield) { if (varfield == null) { return - 1; } var totalcount = 0; for (i = 0; i < varfield.value.length; i++) { if (varfield.value.charcodeat(i) > 127) { totalcount += 2; } else { totalcount++ ; } } return totalcount; } function getfirstselectedvalue( checkboxid ) { var value = null; var i = 0; if ( document.all(checkboxid).length > 0 ) { for ( i = 0; i < document.all(checkboxid).length; i++ ) { if ( document.all(checkboxid).item( i ).checked ) { value = document.all(checkboxid).item(i).value; break; } } } else { if ( document.all(checkboxid).checked ) { value = document.all(checkboxid).value; } } return value; } function getfirstselectedindex( checkboxid ) { var value = - 2; var i = 0; if ( document.all(checkboxid).length > 0 ) { for ( i = 0; i < document.all(checkboxid).length; i++ ) { if ( document.all(checkboxid).item( i ).checked ) { value = i; break; } } } else { if ( document.all(checkboxid).checked ) { value = - 1; } } return value; } function selectall( checkboxid, status ) { if ( document.all(checkboxid) == null) { return; } if ( document.all(checkboxid).length > 0 ) { for ( i = 0; i < document.all(checkboxid).length; i++ ) { document.all(checkboxid).item( i ).checked = status; } } else { document.all(checkboxid).checked = status; } } function selectinverse( checkboxid ) { if ( document.all(checkboxid) == null) { return; } if ( document.all(checkboxid).length > 0 ) { for ( i = 0; i < document.all(checkboxid).length; i++ ) { document.all(checkboxid).item( i ).checked = !document.all(checkboxid).item( i ).checked; } } else { document.all(checkboxid).checked = !document.all(checkboxid).checked; } } function checkdate( value ) { if (value == '') { return true; } if (value.length != 8 || !isnumber(value)) { return false; } var year = value.substring(0, 4); if (year > "2100" || year < "1900") { return false; } var month = value.substring(4, 6); if (month > "12" || month < "01") { return false; } var day = value.substring(6, 8); if (day > getmaxday(year, month) || day < "01") { return false; } return true; }; /* 用途:检查输入的起止日期是否正确,规则为两个日期的格式正确或都为空且结束日期>=起始日期 输入:startdate:起始日期,字符串; enddate: 结束日期,字符串 返回:如果通过验证返回true,否则返回false */ function checkperiod( startdate, enddate ) { if ( !checkdate(startdate) ) { alert("起始日期不正确!"); return false; } else if ( !checkdate(enddate) ) { alert("终止日期不正确!"); return false; } else if ( startdate > enddate ) { alert("起始日期不能大于终止日期!"); return false; } return true; }; /* 用途:检查证券代码是否正确 输入:seccode:证券代码 返回:如果通过验证返回true,否则返回false */ function checkseccode( seccode ) { if ( seccode.length != 6 ) { alert("证券代码长度应该为6位"); return false; } if (!isnumber( seccode ) ) { alert("证券代码只能包含数字"); return false; } return true; }; /* function:ctrim(sinputstring,itype) description:字符串去空格的函数 parameters:itype:1=去掉字符串左边的空格;2=去掉字符串左边的空格;0=去掉字符串左边和右边的空格 return value:去掉空格的字符串 */ function ctrim(sinputstring, itype) { var stmpstr = ' '; var i = - 1; if (itype == 0 || itype == 1) { while (stmpstr == ' ') { ++i; stmpstr = sinputstring.substr(i, 1); } sinputstring = sinputstring.substring(i); } if (itype == 0 || itype == 2) { stmpstr = ' '; i = sinputstring.length; while (stmpstr == ' ') { --i; stmpstr = sinputstring.substr(i, 1); } sinputstring = sinputstring.substring(0, i + 1); } return sinputstring; };
推荐阅读