JQuery 简单表单验证
生活随笔
收集整理的這篇文章主要介紹了
JQuery 简单表单验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
菜鳥教程 | 表單驗證實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script> $.validator.setDefaults({submitHandler: function() {alert("提交事件!");// form.submit();} }); $().ready(function() { // 在鍵盤按下并釋放及提交后驗證提交表單$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},"topic[]": {required: "#newsletter:checked",minlength: 2},agree: "required"},messages: {firstname: "請輸入您的名字",lastname: "請輸入您的姓氏",username: {required: "請輸入用戶名",minlength: "用戶名必需由兩個字母組成"},password: {required: "請輸入密碼",minlength: "密碼長度不能小于 5 個字母"},confirm_password: {required: "請輸入密碼",minlength: "密碼長度不能小于 5 個字母",equalTo: "兩次密碼輸入不一致"},email: "請輸入一個正確的郵箱",agree: "請接受我們的聲明",topic: "請選擇兩個主題"}}); }); </script> <style> .error{color:red; } </style> </head> <body> <form class="cmxform" id="signupForm" method="get" action=""><fieldset><legend>驗證完整的表單</legend><p><label for="firstname">名字</label><input id="firstname" name="firstname" type="text"></p><p><label for="lastname">姓氏</label><input id="lastname" name="lastname" type="text"></p><p><label for="username">用戶名</label><input id="username" name="username" type="text"></p><p><label for="password">密碼</label><input id="password" name="password" type="password"></p><p><label for="confirm_password">驗證密碼</label><input id="confirm_password" name="confirm_password" type="password"></p><p><label for="email">Email</label><input id="email" name="email" type="email"></p><p><label for="agree">請同意我們的聲明</label><input type="checkbox" class="checkbox" id="agree" name="agree"></p><p><label for="newsletter">我樂意接收新信息</label><input type="checkbox" class="checkbox" id="newsletter" name="newsletter"></p><fieldset id="newsletter_topics"><legend>主題 (至少選擇兩個) - 注意：如果沒有勾選“我樂意接收新信息”以下選項會隱藏，但我們這里作為演示讓它可見</legend><label for="topic_marketflash"><input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash</label><label for="topic_fuzz"><input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz</label><label for="topic_digester"><input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester</label><label for="topic" class="error" style="display:none">至少選擇兩個</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset> </form> </body> </html>菜鳥教程 | radio（單選按鈕）、checkbox（復選按鈕）和 select（下拉框）驗證實例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Validate 插件 - radio（單選按鈕）、checkbox（復選按鈕）和 select（下拉框）</title><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <style> .error{color:red; } </style> <script> // 只用于演示 $.validator.setDefaults({submitHandler: function() {alert("submitted!");} });$(document).ready(function() {$("#form1").validate();$("#selecttest").validate(); }); </script><style> .block { display: block; } form.cmxform label.error { display: none; } </style></head> <body><div id="main"><form class="cmxform" id="form1" method="get" action=""><fieldset><legend>通過 radio（單選按鈕）和 checkbox（復選按鈕）驗證表單</legend><fieldset><legend>性別</legend><label for="gender_male"><input type="radio" id="gender_male" value="m" name="gender" required>男性</label><label for="gender_female"><input type="radio" id="gender_female" value="f" name="gender">女性</label><label for="gender" class="error">請選擇您的性別。</label></fieldset><fieldset><legend>婚姻狀況</legend><label for="family_single"><input type="radio" id="family_single" value="s" name="family" required>單身</label><label for="family_married"><input type="radio" id="family_married" value="m" name="family">已婚</label><label for="family_other"><input type="radio" id="family_other" value="o" name="family">其他</label><label for="family" class="error">您選擇您的婚姻狀況。</label></fieldset><p><label for="agree">請同意我們的條款</label><input type="checkbox" class="checkbox" id="agree" name="agree" required><br><label for="agree" class="error block">請同意我們的條款！</label></p><fieldset><legend>垃圾郵件</legend><label for="spam_email"><input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2">垃圾郵件 - E-Mail</label><label for="spam_phone"><input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]">垃圾郵件 - Phone</label><label for="spam_mail"><input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]">垃圾郵件 - Mail</label><label for="spam[]" class="error">請選擇至少兩種類型的垃圾郵件。</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset> </form><form id="selecttest"><h2>一些關于 select 的測試</h2><p><label for="jungle">請選擇一個叢林名詞</label><br><select id="jungle" name="jungle" title="請選擇一個叢林名詞！" required><option value=""></option><option value="1">Buga</option><option value="2">Baga</option><option value="3">Oi</option></select></p><p><label for="fruit">請選擇至少兩種水果</label><br><select id="fruit" name="fruit" title="請選擇至少兩種水果！" required minlength="2" multiple="multiple"><option value="b">Banana</option><option value="a">Apple</option><option value="p">Peach</option><option value="t">Turtle</option></select></p><p><label for="vegetables">請選擇不超過兩種蔬菜</label><br><select id="vegetables" name="vegetables" title="請選擇不超過兩種蔬菜！" required maxlength="2" multiple="multiple"><option value="p">Potato</option><option value="t">Tomato</option><option value="s">Salad</option></select></p><p><label for="cars">請選擇至少兩種但不超過三種汽車</label><br><select id="cars" name="cars" title="請選擇至少兩種但不超過三種汽車！" required rangelength="[2,3]" multiple="multiple"><option value="m_sl">Mercedes SL</option><option value="o_c">Opel Corsa</option><option value="vw_p">VW Polo</option><option value="t_s">Titanic Skoda</option></select></p><p><input type="submit" value="Validate Select 測試"></p> </form> </div> </body> </html>表單元素獲取 val()
<body><p>名稱: <input type="text" name="user"></p> <button>點擊獲取</button></body> <script>$(document).ready(function(){$("button").click(function(){alert($("input:text").val());}); }); </script>表單元素賦值 val() attr()
<body><p>名稱: <input type="text" name="user"></p> <button>點擊賦值</button></body><script> $(document).ready(function(){$("button").click(function(){// 兩種方式都行// $("input:text").val("hello world");$("input:text").attr("value","hello world");}); }); </script>設置屬性 attr()
<body><img src="img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213"> <br> <button>為圖片設置width屬性</button></body><script> $(document).ready(function(){$("button").click(function(){$("img").attr("width","500").attr("height","500");}); }); </script>動態修改div層的尺寸
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>test</title><script src="jquery-2.0.3.js"></script><style type="text/css">#div1{border:1px solid #F00; width:200px; height:100px;}</style> </head> <body> 寬<input type="text" id="w">像素<br> 高<input type="text" id="h">像素<br> <input type="button" id="btn" value="修改尺寸"><br> <div id="div1"> </div> <br> <script language="javascript">//JQuery函數，鼠標懸停事件$("#btn").click(function(){var w=$("#w").val();var h=$("#h").val();//$("#div1").width(w).height(h);$("#div1").css("width",w+"px").css("height",h+"px");}); </script></body> </html>Java 菜鳥，積累實用的例子
總結
以上是生活随笔為你收集整理的JQuery 简单表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ch10_ex32nbsp;荷兰国旗问题
- 下一篇： 编程篇(002)-js实现一个打点计时器