bootstarp4+Jquery parsley表单校验

实例：

HTML代码

<form class="needs-validation" id="joinFrom" action="panel.html"
                                      data-parsley-validate>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="validationCustom01">姓名</label>
                                                <input type="text" class="form-control" id="validationCustom01"
                                                       placeholder="名字*必填" name="username "
                                                       data-parsley-required="true" data-parsley-error-message="请输入姓名">
                                                <div class="valid-feedback">
                                                    哈哈哈
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="validationCustom02">手机号</label>
                                                <input type="text" class="form-control" id="validationCustom02"
                                                       placeholder="手机号*必填" name="phone" data-parsley-required="true"
                                                       data-parsley-error-message="请输入姓名">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="validationCustom03">留言</label>
                                                <textarea type="text" class="form-control" id="validationCustom03"
                                                          placeholder="留言" name="remark"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary" type="submit">提交表格</button>
                                </form>

JS代码：

    $(document).ready(function () {
        $(".needs-validation").parsley()
    });

不需要其他额外操作，直接把饭喂到嘴里！

 

正常效果图：

不填写直接提交表格效果图：

表单验证完成之后，在做一些其他事情，比如请求ajax：

$('.needs-validation').on('submit', function () {
        if ($(this).parsley().isValid()) {
            alert("哈哈哈")
        }
});

 

1. 以前都是用的SweetAlert2做的这种验证，用了这个感觉真香，做个笔记！