标签：submit   field   用户体验   inpu   element   需要   事件   integer   mobile   

完成表单的校验

需求分析

? 昨天我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。

技术分析

【HTML中innerHTML属性】

【JS中的常用事件】

onfocus : 获得焦点（鼠标光标位置）事件
onblur : 失去焦点（鼠标光标位置）事件
onkeyup : 按键抬起事件

代码实现

			用户名:

			密码:

			确认密码:

			邮箱:

			手机号:


	

导入的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  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  "2100" || year  "12" || month  getMaxDay(year, month) || day =起始日期 
输入：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  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  0 )
    {
        for ( i = 0; i  0 )
    {
        for ( i = 0; i  0 ) 
    {
        for ( i = 0; i  "2100" || year  "12" || month  getMaxDay(year, month) || day =起始日期 
输入：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;
};

使用JavaScript完成表单的校验

标签：submit   field   用户体验   inpu   element   需要   事件   integer   mobile   

原文地址：https://www.cnblogs.com/zllk/p/12833971.html