一、$('form :input')与$('form input')的区别：
1、$('form :input')返回form中的所有表单对象，包括textarea、select、button等；
$('form input')返回form中的所有input标签对象。
2、form input是属于层级选择器（将每一个选择器匹配到的元素合并后一起返回）；
form :input是属于表单选择器（匹配所有 input、textarea、select、button等）。
二、jQuery 事件 - triggerHandler() 方法
1、定义和用法
triggerHandler()方法触发被选元素的指定事件类型。
triggerHandler()方法与trigger()方法类似。不同的是它不会触发事件的默认行为（比如表单提交），而只影响第一个匹配元素。
与 trigger() 方法相比的不同之处
- 它不会引起事件的默认行为（比如表单提交）；
- .trigger()会操作jQuery对象匹配的所有元素，而.triggerHandler()只影响第一个匹配元素;
- 由.triggerHandler()创建的事件不会在DOM树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
- 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
需求：
（1）* 代表必填项
（2）必填项数据为空或者不符合格式要求时，input后面追加红色的 × 符号
（3）必填项数据符合格式要求时，input后面追加红色的 √ 符号
（4）必填项数据完全正确时，表单才可以提交数据，否则不可以提交
（1）无操作
（2）为空时：
（3）输入数据不符要求时
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/demo.css"> </head> <body> <div> <p>用户注册</p> <!--注册表单--> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required" /> <span class="formtips">*</span> </div> <div class="int"> <label for="email">邮箱:</label> <input type="text" id="email" class="required" /> <span class="formtips">*</span> </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo" /> </div> <div class="sub"> <input type="submit" value="提交" id="send" /><input type="reset" id="res" /> </div> </form> </div> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/demo.js"></script> </body> </html>
css
body { font: 12px/19px Arial, Helvetica, sans-serif; color: #666; } form div { margin: 5px 0; } .int label { float: left; width: 100px; text-align: right; } .int input { padding: 1px 1px; border: 1px solid #ccc; height: 16px; } .sub { padding-left: 100px; } .sub input { margin-right: 10px; } .formtips { margin: 2px; padding: 2px; color: #f00 } .onError { background: #FFE0E9 url(../images/error.png) no-repeat 0 center; padding-left: 25px; } .onSuccess { background: #E9FBEB url(../images/right.png) no-repeat 0 center; padding-left: 25px; } .high { color: red; } .focus { border: 1px solid #f00; background: #fcc; }
js
$(function () { // 1.如果是必填的，则加红星标识 // $("form :input.required").each(function () { // var $required = $(" <strong class='high'>*</strong>");//创建元素 // $(this).parent().append($required);//然后将它追加到文档中 // }); //2.文本框失去焦点后开始验证 $('form :input').blur(function () { var $parent = $(this).parent(); $parent.find(".formtips").remove(); //2.1验证用户名 if ($(this).is("#username")) { if (this.value == "" || this.value.length < 6) { var errorMsg = '请输入至少6位的用户名.'; $parent.append('<span class="formtips onError">' + errorMsg + '</span>'); } else { var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); } } //2.2验证邮件 if ($(this).is('#email')) { if (this.value == "" || (this.value != "" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value))) { var errorMsg = '请输入正确的E-Mail地址.'; $parent.append('<span class="formtips onError">' + errorMsg + '</span>'); } else { var okMsg = '输入正确.'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); } } //2.3实现一边输入一边验证 }).keyup(function () { //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点 $(this).triggerHandler('blur'); }).focus(function () { $(this).triggerHandler('blur'); });//end blur //2.4提交，最终验证。 $("#send").click(function () { //trigger 事件执行完后，浏览器会为submit按钮获得焦点 $("form :input.required").trigger('blur'); var numError = $('form .onError').length; if (numError) { return false; } alert("注册成功,密码已发到你的邮箱,请查收."); }); //3.重置 $('#res').click(function () { $(".formtips").remove(); }); //4.选中输入的时候输入框变色 $(":input").focus(function(){ $(this).addClass("focus"); }).blur(function(){ $(this).removeClass('focus'); }); })
