使用JQuery完成表单的校验(扩展)
事件:
获得焦点事件: onfocus
失去焦点事件: onblur
按键抬起事件: onkeyup
鼠标移入: onmouseenter
鼠标移出: onmouseout
JS引入外部文件 : script标签
需求分析
在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示
技术分析
- trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()
步骤分析
代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"/> <title></title> <!-- 1. 首先给必填项,添加尾部添加一个小红点 2. 获取用户输入的信息,做相应的校验 3. 事件: 获得焦点, 失去焦点, 按键抬起 4. 表单提交的事件 Jq的方式来实现: 1. 导入JQ的文件 2. 文档加载事件: 在必填项后天加一个小红点 3. 表单校验确定事件: blur focus keyup 4. 提交表单 submit --> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script> $(function () {//默认做一些页面初始化 // 在所有必填项后天加一个小红点 * $(".bitian").after("<font class='high'>*</font>"); //给必填项绑定事件 $(".bitian").blur(function () { //首先获取用户当前输入的值 // var value = this.value; var value = $(this).val(); //清空当前必填项后面的span // $(".formtips").remove(); $(this).parent().find(".formtips").remove(); //获得当前事件是谁的 if ($(this).is("#username")) { //判断是否是用户名输入项 //校验用户名 if (value.length < 6) { $(this).parent().append("<span class='formtips onError'>用户名太短了</span>"); } else { $(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>"); } } if ($(this).is("#password")) {//判断是否是密码输入项 //校验密码 if (value.length < 3) { $(this).parent().append("<span class='formtips onError'>密码太短了</span>"); } else { $(this).parent().append("<span class='formtips onSuccess'>密码够用</span>"); } } }).focus(function () { $(this).triggerHandler("blur"); }).keyup(function () { $(this).triggerHandler("blur"); }); // $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){}) //给表单绑定提交事件 $("form").submit(function () { //触发必填项的校验逻辑 $(".bitian").trigger("focus"); //找到错误信息的个数 var length = $(".onError").length if (length > 0) { return false; } return true; }); }); </script> </head> <body> <form action="index.html"> <div> 用户名:<input type="text" class="bitian" id="username"/> </div> <div> 密码:<input type="password" class="bitian" id="password"/> </div> <div> 手机号:<input type="tel"/> </div> <div> <input type="submit"/> </div> </form> </body> </html> —-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/111181.html