Html input 常见问题
1.input回车事件不执行导致页面刷新
场景：在文本框中输入关键字按回车，页面自动刷新了
<form name="keywordForm" method="post" action=""> <p id="profile_nav"> <label for="profile"> 关键字搜索： </label> <input style="width:80; height:20" type="text" name="keyword" onkeypress="searchKeywordKeyboard(event)" /> <input type="button" value="搜索" onClick="searchKeyword()"> </p> </form>
解决方法1：
一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。 既然是只有一个文本框才会出问题，那么可以加一个隐藏的文本框
解决方法2：（推荐）
<form name="keywordForm" method="post" action="" onsubmit="return false;"> 就是在表单 form 后面加上一个 onsubmit 事件，返回 false，来阻止 form 提交。
解决方法3：（不推荐）
document.onkeydown=function(e){ var e = e || event; var currKey = e.keyCode || e.which || e.charCode;//支持IE,FireFox if (currKey == 13) { return false; } }
解决方法4：
<input type="text" onkeydown="return ClearSubmit(event)" /> function ClearSubmit(e) { if (e.keyCode == 13) { return false; } }
2.表单校验之datatype
凡要验证格式的元素均需绑定datatype属性，datatype可选值内置有10类，用来指定不同的验证格式。
如果还不能满足您的验证需求，可传入自定义datatype，可绑定的附加属性有：datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等.
内置基本的datatype类型有： * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url
5.2版本之后，datatype支持规则累加或单选。用","分隔表示规则累加；用"|"分隔表示规则多选一，即只要符合其中一个规则就可以通过验证，绑定的规则会依次验证，只要验证通过，后面的规则就会忽略不再比较。
5.2.1版本之后，datatype支持：直接绑定正则：如可用这样写datatype="/\w{3,6}/i"，要求是3到6位的字母，不区分大小写；
http://deerchao.net/tutorials/regex/regex.htm#lookaround
参考链接：http://blog.csdn.net/zhangdaiscott/article/details/26375043
3.html5 原生表单验证
html5 原生表单验证 + ajax 提交 无需任何第三方验证框架 通过pattern 和 oninvalid 属性统一验证表单 。
oninvalid：提交的input元素的值为无效值时（这里是正则验证失败），触发oninvalid事件。oninvalid属于Form 事件。
setCustomValidity()：这个是HTML5内置的JS方法，用来自定义提示信息
pattern 属性规定用于验证输入字段的正则表达式。
注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="#" method="post" onsubmit="return false"> <input type="text" name="mobile" id="mobile" placeholder="请输入手机号码" pattern="^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$" oninvalid="validateIt(this,'手机号码格式错误')" oninput="validateIt(this,'手机号码格式错误')" required/> <input type="text" name="age" id="address" placeholder="请输入地址" pattern="^.{5,200}$" oninvalid="validateIt(this,'地址不符合规范')" oninput="validateIt(this,'地址不符合规范')" required/> <button type="submit" id="submit" >提交</button> </form> </body> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> function validateIt(inputelement,errMsg){ if(inputelement.validity.patternMismatch){ inputelement.setCustomValidity(errMsg); }else{ inputelement.setCustomValidity(''); //输入内容符合验证条件 } return true; } $(function() { if ($("*:invalid") == 0) { // 如果验证都通过 $("#submit").submit(function() { $.ajax({ type: "post", url: "你的地址", data: $("form").serialize(), async: true, success: function(data) { alert(data); }, dataType: "json" // json 格式的返回值 }); }); } }); </script>
参考：
http://blog.csdn.net/xiawu1990/article/details/49893473
http://blog.csdn.net/qq_21707807/article/details/53035977
http://blog.csdn.net/teresa502/article/details/8524184
