表单演示 常用搜索框演示js代码 

基本信息
姓名 *
年龄 *
性别 *
民族 汉族 少数民族 *
语种 汉语 英语 法语 俄语 西班牙语 *
运动 蓝球 足球 排球 最少一项,最多三项
省份 最多一项
更多信息
上传头像 *
自我介绍

还剩0字

最多50字,最多4000字
学习意向 *
表单处理

Ctrl+Enter提交优化用户体验

来自互联网,验证通过onkeyup事件写入,简洁有效。适合用户体验和二次开发使用。

演示

代码片段

<BODY onkeydown="if(event.ctrlKey&&event.keyCode=='13') form1.submit.click();">
<FORM METHOD=POST ACTION="" name="form1">
<input type="text">
<input type="submit" value="发送" name="submit">

js表单输入验证最简洁的验证写法

来自互联网,验证通过onkeyup事件写入,简洁有效。适合用户体验和二次开发使用。

只能是中文

<input onKeyUp="value=value.replace(/[ -~]/g,'')" onKeyDown="if(event.keyCode==13) event.keyCode=9">

屏蔽输入法

<input style="ime-mode:disabled" onKeyDown="if(event.keyCode==13)event.keyCode=9">

只能输入英文和数字

<input onKeyUp="value=value.replace(/[\W]/g,'') "  onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onKeyDown="if(event.keyCode==13)event.keyCode=9">

只能显示,不能修改

<input readonly value="只能显示,不能修改">

文本框只能输入数字代码(小数点也不能输入)

<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

只能输入数字,能输小数点

<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

数字和小数点方法二

<input type=text t_value="" o_value=""   onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else     this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"     onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else     this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value"     onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

只能输入字母和汉字

<input onkeyup="value=value.replace(/[\d]/g,'')   "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))"   maxlength=10 name="Numbers">

只能输入英文字母和数字,不能输入中文

<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

只能输入数字和英文

<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号

<input onKeyPress="if((event.keyCode<48 || event.keyCode>57)   && event.keyCode!=46 ||   /\.\d\d$/.test(value))event.returnValue=false">

小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号

<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

来自日常工作中的整理,使用频率比较高的一个代码范例。 遇到的时候不太好找,所以要收藏哦。

演示

正则表单验证测试

代码

/* 正则检查表单案例 */
function checkform(){
$element = document.getElementById("telephone");
$m = $element.value.match(/^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/);
if($m == null){
alert("电话号码不正确");return false;
}
else{
alert("恭喜!电话号码正确");return false;
}
}

文档js 正则大全

email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,

phone : /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,

mobile : /^((\(\d{3}\))|(\d{3}\-))?13[0-9]\d{8}?$|15[89]\d{8}?$/,

//url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,

idCard : "this.isIdCard(value)",

currency : /^\d+(\.\d+)?$/,

number : /^\d+$/,

zip : /^[1-9]\d{5}$/,

ip : /^[\d\.]{7,15}$/,

qq : /^[1-9]\d{4,8}$/,

integer : /^[-\+]?\d+$/,

double : /^[-\+]?\d+(\.\d+)?$/,

english : /^[A-Za-z]+$/,

chinese : /^[\u0391-\uFFE5]+$/,

userName : /^[a-z_ ]\w{3,}$/i,

//unSafe : /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,

//unSafe : /[<>\?\#\$\*\&;\\\/\[\]\{\}=\(\)\.\^%,]/,

//safeStr : /[^#\'\"~\.\*\$&;\\\/\|]/,*/