html input 不动,Html input 常见问题

1.input回车事件不执行导致页面刷新

场景：在文本框中输入关键字按回车，页面自动刷新了

关键字搜索：

解决方法1：

一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件。　　既然是只有一个文本框才会出问题，那么可以加一个隐藏的文本框

解决方法2：(推荐)

　　就是在表单 form 后面加上一个 onsubmit 事件，返回 false，来阻止 form 提交。

解决方法3：(不推荐)

document.οnkeydοwn=function(e){var e = e || event;var currKey = e.keyCode || e.which || e.charCode;//支持IE,FireFox

if (currKey == 13) {return false;

}

}

解决方法4：

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 属性适用于以下 类型：text, search, url, telephone, email 以及 password 。

提交

functionvalidateIt(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 格式的返回值

});

});

}

});

参考：

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