jQuery学习笔记——表单验证

来源：互联网发布：三体歌者文明知乎编辑：程序博客网时间：2024/06/08 17:59
<!--作者：1377378268@qq.com时间：2017-08-29描述：实现简单的表单验证--><!DOCTYPE html><html><head><meta charset="UTF-8"><title>表单验证</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><form method="post" action=""><div class="int"><label for="username">用户名:</label><input type="text" id="username" class="required" /></div><div class="int"><label for="email">邮箱:</label><input type="text" id="email" class="required" /></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><script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//如果是必填的，则加红星标识.$("form :input.required").each(function(){var $required = $("<strong class='high'> *</strong>"); //创建元素$(this).parent().append($required); //然后将它追加到文档中});         //文本框失去焦点后    $('form :input').blur(function(){ var $parent = $(this).parent(); //刪除以前的提醒元素 $parent.find(".formtips").remove(); //验证用户名 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>');} } //验证邮件 if( $(this).is('#email') ){if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.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>');} }}).keyup(function(){//.triggerHandler()函數只會觸發為元素綁定的blur事件，不會觸發瀏覽器默認的blur事件   $(this).triggerHandler("blur");}).focus(function(){     $(this).triggerHandler("blur");});//end blur//提交，最终验证。 $('#send').click(function(){ //觸發blur事件$("form :input.required").trigger('blur');var numError = $('form .onError').length;if(numError){return false;} alert("注册成功,密码已发到你的邮箱,请查收."); });//重置 $('#res').click(function(){$(".formtips").remove();  });})</script></body></html>
效果：
阅读全文
0 0