Html input 常见问题

时间：2023-11-28 23:23:26

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 == ) {

            return false;

        }

    }

解决方法4：

<input type="text"  onkeydown="return ClearSubmit(event)" />

 function ClearSubmit(e) {

      if (e.keyCode == ) {

         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

相关文章