实例 validate与 jquery form · PHP/Python/前端/Linux 等等学习笔记

[TOC] ## 概述 <details> <summary>main.html</summary> ``` <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </head> <body> <div class="container"> <form class="j-ajax-form form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword1" class="col-sm-2 control-label">Text</label> <div class="col-sm-10"> <input type="text" class="form-control" name="text" id="inputPassword1" placeholder="输入的值大于3小鱼6" min="3" max="6" requried> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" name="pwd" id="inputPassword" placeholder="Password" requried> </div> </div> <div class="col-sm-offset-2"> <input type="submit" class="btn btn-primary" > </div> </form> </div> <script> $(function () { $("form").validate({ debug:true, ignore: ".ignore", // 对带有 .ignore 的忽略验证 submitHandler: function(form) { if ($(form).hasClass("j-ajax-form")){ var options = { //target: '#output2', // target element(s) to be updated with server response beforeSubmit: beforeSubmit, // pre-submit callback success: success // post-submit callback // other available options: //url: url // override for form's 'action' attribute //type: type // 'get' or 'post', override for form's 'method' attribute //dataType: null // 'xml', 'script', or 'json' (expected server response type) //clearForm: true // clear all form fields after successful submit //resetForm: true // reset the form after successful submit // $.ajax options can be used here too, for example: //timeout: 3000 }; $('#myForm').ajaxSubmit(options) }else { $(form).submit(); } }, errorPlacement:function (err,element) { console.log(err); // 方式一: // error.appendTo(element.parent()); //默认,错误信息放在验证的元素后面 // 方式二: err.addClass("help-block") element.parent().append(err); element.parents(".form-group").addClass('has-error') }, showErrors:function (errorMap,errorList){ // todo 对错误提示进行国际化替换 }, success:function (label) { // 成功时,过滤 has-error 类 console.log(label); label.parents(".form-group").removeClass("has-error") label.remove() }, }); }) function beforeSubmit(formData, jqForm, options) { var queryString = $.param(formData); console.log('About to submit: \n\n' + queryString); } function success(responseText, statusText, xhr, $form) { alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); } </script> </body> </html> ``` </details> <br/>