原生表单验证

July 21, 2017

required表示不能为空值,可以配合pattern验证表单,但是应该是不支持移动端的。

如何阻止submit提交:在js中监听submit方法,用ajax提交表单最后阻止submit的自动提交。

    <body>

        <form action="" id="flow_myform" method="post">
            username:<input type="text" name="username" value="" required /> <br /> email: <input type="text" name="phoneNumber" id="phoneNumber" pattern="^1[3-9]\d{9}$" required /> <br />
            <input type="submit" value="submit" />
        </form>

        <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
        <script type="text/javascript">
            //form to json 
            (function($) {
                $.fn.serializeJson = function() {
                    var serializeObj = {};
                    $(this.serializeArray()).each(
                        function() {
                            if(serializeObj[this.name]) {
                                serializeObj[this.name] = serializeObj[this.name] +
                                    "," + this.value;
                            } else {
                                serializeObj[this.name] = this.value;
                            }
                        });
                    return serializeObj;
                };
            })(jQuery);

            //提示
            phoneNumber.oninvalid = function() {
                phoneNumber.setCustomValidity("请输入正确的手机号");
            };

            $(function() {
                $('#flow_myform').on('submit', function(ev) {
                    //TODO:添加ajax方法...
                    var formData = $("#flow_myform").serializeJson();
                    console.log(formData);
                    //ev.preventDefault();  
                    //或者return false
                    return false;
                });
            });         
        </script>
    </body>

手机端验证还是需要js判断:

如:

if( document.myFormName.username.value != "12345" ){
       alert( "username请输入12345");
       document.myFormName.username.focus() ;
}

jquery根据name寻找:

//input控件
alert($("input[name='form_reporter']").val());
//select控件
alert($("select[name='pickerTest']").find("option:selected").text());
//textarea 
alert($("textarea[name='form_gd_description']").val());