欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用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;
};