输入框设置输入规则

在一些特定的环境中我们会需要用户输入的数据符合我们的要求.
如:输入身份证号 手机号 车牌等一系列有规律的数据,
普通的输入框是你输入什么都可以的
在这里插入图片描述

若这是录入名字或文本是没问题的,但要是别的就不行了,就不如销售折扣就不可以出现除.和数字外的任何字符.
在这里插入图片描述
在这里插入图片描述
在我们编程计算中若出现上图的数据,计算机运算不了就会报错,所以我们就要给input加上点限制.
在我们输入完后正则会将符合规则的字符替换成我们设置好的字符。
Replace 替换, 正则表达式
οnkeyup=‘this.value=this.value.replace(/[^.\d]/g,"")’
除.号和数字的字符全部替换成” ”空,这是写在标签内的键盘监听事件
/为匹配 []内的 ^代表除去接下来匹配的内容 .就是.号\d 匹配数字/g结束 ,“”把替换成的字符写在””中
你也可以在js中选中这个inpiut元素给提添加 onkeyup()方法后调用replace()正则替换方法,这样可以批量给inpu添加同一个规则
下面是我收集的一些关于正则的资料:
“^\d+ " / / + 0 " [ 0 9 ] [ 1 9 ] [ 0 9 ] " //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]* ” //正整数
“^((-\d+)|(0+)) " / / + 0 " [ 0 9 ] [ 1 9 ] [ 0 9 ] " //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]* ” //负整数
“^-?\d+KaTeX parse error: Expected group after '^' at position 10: " //整数 "^̲\d+(\.\d+)?” //非负浮点数(正浮点数 + 0)
“^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))KaTeX parse error: Expected 'EOF', got '\d' at position 16: " //正浮点数 "^((-\̲d̲+(\.\d+)?)|(0+(…” //非正浮点数(负浮点数 + 0)
“^(-(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9])))KaTeX parse error: Expected 'EOF', got '\d' at position 16: " //负浮点数 "^(-?\̲d̲+)(\.\d+)?” //浮点数
1+ " / / 26 " [ A Z ] + " //由26个英文字母组成的字符串 "^[A-Z]+ ” //由26个英文字母的大写组成的字符串
2+ " / / 26 " [ A Z a z 0 9 ] + " //由26个英文字母的小写组成的字符串 "^[A-Za-z0-9]+ ” //由数字和26个英文字母组成的字符串
“^\w+KaTeX parse error: Expected 'EOF', got '\w' at position 32: …者下划线组成的字符串 "^[\̲w̲-]+(\.[\w-]+)*@…” //email地址
3+://(\w+(-\w+))(.(\w+(-\w+)))(?\S)? " / / u r l / ( d 2 d 4 ) ( ( 0 ( [ 1 9 ] 1 ) ) ( 1 [ 1 2 ] ) ) ( ( [ 0 2 ] ( [ 1 9 ] 1 ) ) ( 3 [ 0 1 ] ) ) " //url /^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1])) / // 年-月-日
/^((0([1-9]{1}))|(1[1|2]))/((0-2)|(3[0|1]))/(d{2}|d{4}) / / / / / " ( [ w . ] + ) @ ( ( [ [ 0 9 ] 1 , 3 . [ 0 9 ] 1 , 3 . [ 0 9 ] 1 , 3 . ) ( ( [ w ] + . ) + ) ) ( [ a z A Z ] 2 , 4 [ 0 9 ] 1 , 3 ) ( ] ? ) / // 月/日/年 "^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?) ” //Emil
“(d±)?(d{4}-?d{7}|d{3}-?d{8}|^d{7,8})(-d+)?” //电话号码
“^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])KaTeX parse error: Expected 'EOF', got '\d' at position 60: …(((1[6-9]|[2-9]\̲d̲)\d{2})-(0?[135…
C#正则表达式
图片 src[>]*[/].(?:jpg|bmp|gif)(?:”|’)
中文 ^([\u4e00-\u9fa5]+|[a-zA-Z0-9]+)$
网址 "<a.+?href=’""(?!mailto:)(?>foundAnchor>[’"">]+?)[>]?>"
匹配中文字符的正则表达式: [\u4e00-\u9fa5]
匹配双字节字符(包括汉字在内):[^\x00-\xff]
匹配空行的正则表达式:\n[\s| ]
\r
匹配HTML标记的正则表达式:/<(.)>.</\1>|<(.) />/
匹配首尾空格的正则表达式:(^\s
)|(\s*$)(像vbscript那样的trim函数)
匹配Email地址的正则表达式:\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*
匹配网址URL的正则表达式:http://([\w-]+.)+[\w-]+(/[\w- ./?%&=]*)?

以下是例子:
利用正则表达式限制网页表单里的文本框输入内容:
用正则表达式限制只能输入中文:οnkeyup=“value=value.replace(/[^\u4E00-\u9FA5]/g,’’)” onbeforepaste=“clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,’’))”
1.用正则表达式限制只能输入全角字符: οnkeyup=“value=value.replace(/[^\uFF00-\uFFFF]/g,’’)” onbeforepaste=“clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\uFF00-\uFFFF]/g,’’))”
2.用正则表达式限制只能输入数字:οnkeyup="value=value.replace(/[^\d]/g,’’) "onbeforepaste=“clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,’’))”
3.用正则表达式限制只能输入数字和英文:οnkeyup="value=value.replace(/[\W]/g,’’) "onbeforepaste=“clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\d]/g,’’))”
4.计算字符串的长度(一个双字节字符长度计2,ASCII字符计1)
String.prototype.len=function(){return this.replace([^\x00-\xff]/g,“aa”).length;}
5.javascript中没有像vbscript那样的trim函数,我们就可以利用这个表达式来实现,如下: String.prototype.trim = function () {
return this.replace(/(^\s*)|(\s*$)/g, “”);
}
利用正则表达式分解和转换IP地址:
6.下面是利用正则表达式匹配IP地址,并将IP地址转换成对应数值的Javascript程序:
function IP2V(ip)
{
re=/(\d+).(\d+).(\d+).(\d+)/g //匹配IP地址的正则表达式
if(re.test(ip))
{
return RegExp.$1Math.pow(255,3))+RegExp.$2Math.pow(255,2))+RegExp.$3255+RegExp.$41
}
else
{
throw new Error(“不是一个正确的IP地址!”)
}
}


  1. A-Za-z ↩︎

  2. a-z ↩︎

  3. a-zA-z ↩︎

猜你喜欢

转载自blog.csdn.net/weixin_44552168/article/details/91356879