界面上的字段验证,是找的网上的一个js-input验证,觉得挺不错的,分享给大家,但这个验证还是有瑕疵的,就是没有对应的友好提示,可能在客户体验的那方面就不是很好了。
<h1>js验证输入框内容</h1>
<br />
<br />
只能输入英文
<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
<br />
<br />
只能输入英文
<input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')"
onkeydown="fncKeyStop(event)" onpaste="return false"
oncontextmenu="return false" />
无法粘贴,右键不会弹出粘贴菜单
<br />
<br />
只能输入数字:
<input onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')">
<br />
<br />
只能输入数字,小数点:
<input name="price" type="text"
onkeyup="value=value.replace(/[^\d\.]/g,'')">
<br />
<br />
只能输入数字,小数点,下划线:
<input name="price" type="text"
onkeyup="value=value.replace(/[^\d\._]/g,'')">
<br />
<br />
只能输入英文和数字:
<input onkeyup="value=value.replace(/[\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
<br />
<br />
只能输入汉字:
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
<br />
<br />
禁止输入法输入:
<input type="text" style="ime-mode: disabled">
无法切换输入法
<br />
<br />
只能输入中文、英文、数字、@符号和.符号:
<input type="text"
onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g,'')">
<br />
<br />
不能为空:
<input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">
<br />
<br />
数字校验有个bug,希望大家这边注意一下,就是如果有input从后台获取的value值的话,上面的数字校验失效,下面贴出此情况下的处理方式
<input id="lastyearwage" name="lastyearwage" type="text" class="input-text" value="${acheck.lastyearwage }" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
function keyPress() {
var keyCode = event.keyCode;
if ((keyCode >= 48 && keyCode <= 57))
{
event.returnValue = true;
} else {
event.returnValue = false;
}
}
纠正一下啊,上面的正则表达式也是可以的,下面的就当是不同的方法提供了,博主推荐大家还是尽量还是用正则表达式来验证,大家应该知道键盘验证并不是太好,而且代码量也有点多。
js相关的博客,感兴趣的童鞋可以看看:
js标签或控件的显示与隐藏:
http://blog.csdn.net/z1729734271/article/details/52550142
js-添加滚动条
http://blog.csdn.net/z1729734271/article/details/52199348
鼠标移动触发数据提示显示
http://blog.csdn.net/z1729734271/article/details/52540730