表单input中录入资料的检查方法及示例

本文内容

表单录入信息的检查原则

常见检查的三种方法

示例

    输入框有字符长度的限制

    输入框有输入字符个数范围的限制

知识补给--检查方式的介绍

    输入框只可（或不可）输入数字    

    输入框只可（或不可）输入英文    

    输入框只可（或不可）输入英文与数字    

    输入框只可（或不可）输入中文    

    输入框只可输入特定的文字、数字或符号    

    综合示例（验证台湾居民身份证）

附录（常用到正则表达式的符号与说明）

 

表单录入信息的检查原则

尽可能使用选择的方式来减少浏览者用键盘输入资料的操作，如此不仅让浏览者更简单方便地输入资料，也降低输入错误的几率与后续的检查工作。

常见检查的三种方法

  实时检查：就是当在栏位中输入完资料（通常是失去焦点时）就立即进行检查，若不正确则将光标（也就是焦点，Input Focus）重新移回次栏位上，要求重新输入；

  集中检查：当浏览者单击提交资料（或确定）按钮后，由onSubmit调用处理函数来对所有输入的资料进行检查，若发现不正确或资料错误就显示信息（如对话框）告诉浏览者，并要求重新输入；

  后台检查：在网页中完全不检查各栏位资料的正确性，将所有浏览者输入的资料送到后台去检查（通常是由ASP或CGI程序进行检查）。但是！若输入的资料有问题则较难立刻反馈给浏览者，也为后台服务器增加负担。

摆完理论，咱们总得来点实例吧。（对，实例和示例确实有点难于区分！）

• 输入框有字符长度的限制

  具体例子，比如手机号、邮编号等。

功能描述：如手机号栏位必须输入11位数字，且不得超过此长度，同时输入不满11位的出现弹框提示！

实现代码

<script>

function checkInput(inputL, max, it) {

if (inputL == "")return;

//此语句允许该输入框为空，若想要把该输入框作为必填，则应该删除此语句；

 

if (inputL != max) {

//此处的判断条件也可写成'inputL<max'

alert("请输入有效的手机号");

it.focus(); //将焦点返回到此输入框

}

}

</script>

<label>手机号<input type="tel"

onblur="checkInput(this.value.length,11,this)" maxlength="11">

</label>

网页效果

无错误弹窗提示

 

• 输入框有输入字符个数范围的限制

  如身高至少是2位，姓名至少是2位；

功能描述：若输入的字符数不符合要求，则会跳出弹窗提示！

实现代码

<script>
function checkInput(inputL, min, it) {
if (inputL == "")return; //此语句是允许该输入框为空，若想要把该输入框作为必填，则应该删除此语句；

if (inputL < min) { //输入的字符串长度必须大于2
alert("请输入真实的身高！");
it.focus(); //将焦点返回到此输入框
}
}
</script>

<label>身高

<input type="text" onblur="checkInput(this.value.length,2,this)" maxlength="3">cm

</label>

网页效果

无错误弹窗提示

无错误弹窗提示

注：此方法是通过限制(value.length)输入的数字个数（默认用户很配合的输入数字），来实现一定范围的约束。那如果要真正实现数值范围的限制要怎么做呢？

我们可以通过input[type="number"]的min和max属性来实现真正地数值范围约束！

实现代码

<form>

												大卡车司机年龄<input type="number" max="60" min="18">
    <input type="submit">
</form>

网页效果

知识补给

• 以下几个示例涉及到 JavaScript Regex

 

• 检查方式

输入资料的检查方式，一般推荐实时检查而不建议到最后才检查（如单击onsubmit后才检查）。要实现实时检查一般推荐使用onkeyup。不用onblur和onchange的原因在于，这两者必须等到该栏位输入完成后（例如失去焦点或按下回车键）才能调用处理函数来检查。而onkeyup则是每按下一个键松开后就会进行检查（就算不合法还是会显示在输入框内，然后再删除）。打个比方，在输入框按下一个不允许的按键（如只可输入数字，但浏览者却输入了英文）就立刻删除它。

补充：onkeydown与onkeypress的检查方法，并不适合用于检查！

• 优点

实现实时检查，让浏览者知道哪些可以输入哪些不行，更重要的是，这样的输入资料就不会有错误，甚至之后也不必进行检查，可算是最佳的设计方式！

• 原理

输入框限对输入内容的控制是通过replace（searchvalue，newvalue）的两个参数来实现。定义searchvalue实现对输入内容的设置，然后通过定义newvalue设置替换内容。

具体设置：

• 警告！

当在<input>标签中使用onkeyup事件来过滤与检查输入的字符时，就不可以再设置onchange事件处理了，否则可能无法起作用。若需要的话，使用onblur一般是没有问题。

• 输入框只可（或不可）输入数字

功能描述：输入不合要求的字符立即自动回删！

功能实现关键语句

onkeyup="value=value.replace(/[\D]/g,'')"

//只可输入0-9的数字，其他字母、符号、汉字都不可输入
										

 

onkeyup="value=value.replace(/[\d]/g,'')"
																					

//不可输入0-9的数字，其他字母、符号、汉字都可输入

实现代码

<form method="get" action="">
<strong>只</strong>可输入数字（0-9）<input type="text" onkeyup="value=value.replace(/[\D]/g,'')">
<br/>
<br/>
<b>不</b>可输入数字（0-9）<input type="text" onkeyup="value=value.replace(/[\d]/g,'')">
</form>

注：其中replace的用作替换的字符为空，表示只是回删不符合要求的字符，然后自动填上这个空字符。

 

• 输入框只可（或不可）输入英文

功能描述：输入不合要求的字符立即自动回删！

功能实现关键语句

//只可输入英文字与空格，其他数字、符号、汉字都不行
onkeyup="value=value.replace(/[^a-z|^A-Z|^ ]/g,'')"

 

//只可输入英文字，其他数字、符号、汉字和空格都不行
onkeyup = "value=value.replace(/[^a-z|^A-Z]/g,'')"

//实现思路1，只包含大小写字母
onkeyup="value=value.replace(/[\W\d]/g,'')"

//实现思路2，派除不为大小写字母和数字（0-9），排除数字（0-9），即对大小写字母不排除

 

//不可输入英文字，其他数字、符号、汉字和空格都可以
onkeyup = "value=value.replace(/[a-z|A-Z]/g,'')"

 

• 输入框只可（或不可）输入英文与数字

功能描述：输入不合要求的字符立即自动回删！

功能实现关键语句

//只可输入英文字与数字，其他符号、汉字和空格都不以
onkeyup = "value=value.replace(/[^\w]/g,'')"

//实现思路1，允许字符为大小写字母和数字的输入
onkeyup="value=value.replace(/[^a-z|^A-Z|^0-9]/g,'')"

//实现思路2，允许大小写字母和数字的输入

onkeyup="value=value.replace(/[\W]/g,'')"

//实现思路3，排除字符不为大小写字母和数字（0-9）的输入

//不可输入英文字与数字，其他符号、汉字和空格都可以
onkeyup = "value=value.replace(/[\w]/g,'')"

//实现思路1，排除字符为大小写字母和数字（0-9）的输入
onkeyup="value=value.replace(/[^\W]/g,'')"

//实现思路2，允许字符不为大小写字母和数字（0-9）的输入

 

• 输入框只可（或不可）输入中文

功能描述：输入不合要求的字符立即自动回删！

功能实现关键语句

//只可输入中文，其他符号字母、数字和空格都不可
onkeyup = "value=value.replace(/[^\u4E00-u9FA5]/g,'')"   

//实现思路，通过允许汉字内码的输入来实现汉字的输入，注意其中0是数字零
										

 

//只可输入中文，其他符号字母、数字和空格都不可
onkeyup = "value=value.replace(/[^\u4E00-u9FA5]/g,'')"

//实现思路1，通过允许汉字内码的输入来实现汉字的输入，注意其中0是数字零（此法也适用于只输入繁体中文、日文、韩文）
//最大的不足之处在于，通过此方法会出现只允许汉字的直接输入。什么意思呢？简单地说就是不能够使用拼音输入法在此输入框中输入中文，只允许通过手写或者五笔输入
onkeyup = "value=value.replace(/[^\u0020-\u007E]/g,'')"

//实现思路2，通过只允许ASCII码为20H-7EH的字符（也就是字母大小写，数字与符号的内码），其他都不允许，如此也就实现禁用中文的目的了（此法也可适用于不允许繁体中文、日文、韩文）。
//更推荐使用此思路

 

• 输入框只可输入特定的文字、数字或符号

功能描述：输入不合要求的字符立即自动回删！

功能实现关键语句

//只可输入中文，其他符号字母、数字和空格都不可
onkeyup = "value=value.replace(/[^\u4E00-u9FA5]/g,'')"   

//实现思路，通过允许汉字内码的输入来实现汉字的输入，注意其中0是数字零
										

 

//只可输入中文，其他符号字母、数字和空格都不可
onkeyup = "value=value.replace(/[^\u4E00-u9FA5]/g,'')"

//实现思路1，通过允许汉字内码的输入来实现汉字的输入，注意其中0是数字零（此法也适用于只输入繁体中文、日文、韩文）
//最大的不足之处在于，通过此方法会出现只允许汉字的直接输入。什么意思呢？简单地说就是不能够使用拼音输入法在此输入框中输入中文，只允许通过手写或者五笔输入
onkeyup = "value=value.replace(/[^\u0020-\u007E]/g,'')"

//实现思路2，通过只允许ASCII码为20H-7EH的字符（也就是字母大小写，数字与符号的内码），其他都不允许，如此也就实现禁用中文的目的了（此法也可适用于不允许繁体中文、日文、韩文）。
//更推荐使用此思路

 

• 综合示例

验证台湾居民身份证

实现代码

<form method="get" action="">

																台湾居民身份证号码<input type="text" onkeyup="value=value.replace(/[^A-Z|^\d]/g,'')" maxlength="10"

																																	onblur="formationCheck(this.value.length,10,this)">

																																																<!--onkeyup的设置决定了可以输入的内容为大写字母和数字（0-9）-->
    <!--replace其中检测输入的式子等效为"/[^A-Z|^0-9]/g"-->
    <!--onblur函数是用来检验输入字符串的格式-->

																																																	<input type="submit">
</form>
<script>

																																																										function formationCheck(inputL, min, it) {

																																																												if (inputL == "")return;//若此栏位为必填，请删除该语句！

																																																																				if (inputL != min) {

																																																																								alert("证件号长度不正确！");

																																																																												it.focus();

																																																																														return;

																																																																																//若无该return语句
            // 那么当浏览者证件号长度不对时，不仅有弹窗提示"证件号长度不正确"，而且也会提示"请输入有效的证件号"
            // 这样子不利于浏览者快速发现自己的填写错误。因此有必要保留这个return语句

																																																																																	}

																																																																																		idRegex = /^[A-Z][\d]{9}$/; 

//以大写字母开头，后面接着9位数字（0-9），字符串的长度为10

										if (it.value.search(idRegex)) {

																		alert("请输入有效的证件号");
        }
    }
</script>

 

辨析：

replace中的正则表达式是用来对输入内容的限制，并不涉及输入字符串的格式。因此主要是用'|'隔开，表示允许输入的内容。如'/^[\w]/g',该输入框仅允许大小写字母和数字的输入,其中后缀修饰符g表示该输入控制对整个输入框起作用。在replace中'^'表示允许输入。

search中的正则表达式是用来对输入字符串格式的控制，如台湾居民身份证的格式为大写字母开头后面接上9个数字，此时对应的正则表达式为'/^[A-Z]\d{9}$/'。在search中'^'从首个字符开始检查。

 

 

 

 

 

 

附录

常用到正则表达式的符号与说明。

使用正则表达式（Regular Expressions）构造资料格式过滤器（即对输入的字符串的格式进行检查）。

符号	说明
^	从输入的资料首个字符开始比较
$	比较到输入资料的最后一个字符
{n}	比较前面指定的字符条件n次，n为正整数，例如，\d{n}就是比较输入的字符串中是否为（或含有）n个数字（0-9）
{n,}	比较前面指定的字符条件至少n次，n为正整数，例如，\w{n,}就是比较是否至少有n个a-z、A-Z或0-9的字符。
{n,m}	比较前面指定的字符条件至少n次，最多m次，例如\d{n,m}就是比较数字（0-9）的字符数是否大于或等于n小于或等于m
[x|y|z]	比较字符是否为x,y,z其中一个
^[x|y|z]	比较首字符是否为x,yz其中一个
\d	比较字符是否为0-9的数字
\D	比较字符是否不为0-9的数字
\w	比较字符是否为a-z、A-Z或0-9
\W	比较字符是否不为a-z、A-Z或0-9

 

参考资料

《全民搞网页——博客|个人站|网店|论坛》程秉辉