本文内容
表单录入信息的检查原则
常见检查的三种方法
示例
输入框有字符长度的限制
输入框有输入字符个数范围的限制
知识补给--检查方式的介绍
输入框只可(或不可)输入数字
输入框只可(或不可)输入英文
输入框只可(或不可)输入英文与数字
输入框只可(或不可)输入中文
输入框只可输入特定的文字、数字或符号
综合示例(验证台湾居民身份证)
附录(常用到正则表达式的符号与说明)
表单录入信息的检查原则
尽可能使用选择的方式来减少浏览者用键盘输入资料的操作,如此不仅让浏览者更简单方便地输入资料,也降低输入错误的几率与后续的检查工作。
常见检查的三种方法
实时检查:就是当在栏位中输入完资料(通常是失去焦点时)就立即进行检查,若不正确则将光标(也就是焦点,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" οnblur="checkInput(this.value.length,11,this)" maxlength="11"> </label> |
网页效果
无错误弹窗提示
-
输入框有输入字符个数范围的限制
如身高至少是2位,姓名至少是2位;
功能描述:若输入的字符数不符合要求,则会跳出弹窗提示!
实现代码
<script> <label>身高 <input type="text" οnblur="checkInput(this.value.length,2,this)" maxlength="3">cm </label> |
网页效果
无错误弹窗提示
无错误弹窗提示
注:此方法是通过限制(value.length)输入的数字个数(默认用户很配合的输入数字),来实现一定范围的约束。那如果要真正实现数值范围的限制要怎么做呢?
我们可以通过input[type="number"]的min和max属性来实现真正地数值范围约束!
实现代码
|
网页效果
知识补给
-
以下几个示例涉及到 JavaScript Regex
-
检查方式
输入资料的检查方式,一般推荐实时检查而不建议到最后才检查(如单击onsubmit后才检查)。要实现实时检查一般推荐使用onkeyup。不用onblur和onchange的原因在于,这两者必须等到该栏位输入完成后(例如失去焦点或按下回车键)才能调用处理函数来检查。而onkeyup则是每按下一个键松开后就会进行检查(就算不合法还是会显示在输入框内,然后再删除)。打个比方,在输入框按下一个不允许的按键(如只可输入数字,但浏览者却输入了英文)就立刻删除它。
补充:onkeydown与onkeypress的检查方法,并不适合用于检查!
-
优点
实现实时检查,让浏览者知道哪些可以输入哪些不行,更重要的是,这样的输入资料就不会有错误,甚至之后也不必进行检查,可算是最佳的设计方式!
-
原理
输入框限对输入内容的控制是通过replace(searchvalue,newvalue)的两个参数来实现。定义searchvalue实现对输入内容的设置,然后通过定义newvalue设置替换内容。
具体设置:
-
警告!
当在<input>标签中使用onkeyup事件来过滤与检查输入的字符时,就不可以再设置onchange事件处理了,否则可能无法起作用。若需要的话,使用onblur一般是没有问题。
-
输入框只可(或不可)输入数字
功能描述:输入不合要求的字符立即自动回删!
功能实现关键语句
|
实现代码
<form method="get" action=""> |
注:其中replace的用作替换的字符为空,表示只是回删不符合要求的字符,然后自动填上这个空字符。
-
输入框只可(或不可)输入英文
功能描述:输入不合要求的字符立即自动回删!
功能实现关键语句
//只可输入英文字与空格,其他数字、符号、汉字都不行
//只可输入英文字,其他数字、符号、汉字和空格都不行 //实现思路1,只包含大小写字母 //实现思路2,派除不为大小写字母和数字(0-9),排除数字(0-9),即对大小写字母不排除
//不可输入英文字,其他数字、符号、汉字和空格都可以 |
-
输入框只可(或不可)输入英文与数字
功能描述:输入不合要求的字符立即自动回删!
功能实现关键语句
//只可输入英文字与数字,其他符号、汉字和空格都不以 //实现思路1,允许字符为大小写字母和数字的输入 //实现思路2,允许大小写字母和数字的输入 onkeyup="value=value.replace(/[\W]/g,'')" //实现思路3,排除字符不为大小写字母和数字(0-9)的输入 //不可输入英文字与数字,其他符号、汉字和空格都可以 //实现思路1,排除字符为大小写字母和数字(0-9)的输入 //实现思路2,允许字符不为大小写字母和数字(0-9)的输入 |
-
输入框只可(或不可)输入中文
功能描述:输入不合要求的字符立即自动回删!
功能实现关键语句
//只可输入中文,其他符号字母、数字和空格都不可 //实现思路1,通过允许汉字内码的输入来实现汉字的输入,注意其中0是数字零(此法也适用于只输入繁体中文、日文、韩文) //实现思路2,通过只允许ASCII码为20H-7EH的字符(也就是字母大小写,数字与符号的内码),其他都不允许,如此也就实现禁用中文的目的了(此法也可适用于不允许繁体中文、日文、韩文)。 |
-
输入框只可输入特定的文字、数字或符号
功能描述:输入不合要求的字符立即自动回删!
功能实现关键语句
//只可输入中文,其他符号字母、数字和空格都不可 //实现思路1,通过允许汉字内码的输入来实现汉字的输入,注意其中0是数字零(此法也适用于只输入繁体中文、日文、韩文) //实现思路2,通过只允许ASCII码为20H-7EH的字符(也就是字母大小写,数字与符号的内码),其他都不允许,如此也就实现禁用中文的目的了(此法也可适用于不允许繁体中文、日文、韩文)。 |
-
综合示例
验证台湾居民身份证
实现代码
|
辨析:
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 |
参考资料
《全民搞网页——博客|个人站|网店|论坛》程秉辉