JQ---表單驗證（使用者名稱、郵箱）

阿新 • • 發佈：2019-01-22

2015-11-30：表單驗證使用者名稱長度、郵箱格式；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表單驗證</title>
        <style type="text/css">
            .int{
                margin-bottom: 20px;
            }
            .high,.onError{
                color 
: red;
            }
            .onSuccess{
                color: green;
            }
        </style>
        <script src="js/jquery-1.8.2.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().prepend($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!="" && !/[email protected]+\.[a-zA-Z]{2,4}$/.test(this.value))){
                    var errorMsg="請輸入正確的Email地址";
                    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>")
                }else{
                    var okMsg="輸入正確";
                    $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>")
                }
            }
        })
        //設定元素獲取焦點及按鍵彈起觸發blur事件
//      .keyup(function(){
//          $(this).triggerHandler("blur");
//      }).focus(function(){
//          $(this).triggerHandler("blur");
//      })
        ;

        $("#send").click(function(){
            $("form .required:input").trigger('blur');
            var numError=$('form .onError').length;
            if(numError){
                return false;
            }
            alert("註冊成功，密碼已發到你的郵箱請注意查收");
        });
    });
</script>
    </head>
    <body>
        <form method="post" action="#">
            <div class="int">
                <label for="userName">使用者名稱：</label>
                <input type="text" id="userName" class="required" value="" />
            </div>
            <div class="int">
                <label for="email">郵箱：</label>
                <input type="text" id="email" class="required" value="" />
            </div>
            <div class="int">
                <label for="personinifo">個人資料：</label>
                <input type="text" id="persioninfo" value="" />
            </div>
            <div class="sub">
                <input type="submit" name="send" id="send" value="提交" />
                <input type="reset" name="res" id="res" value="重置" />
            </div>
        </form>
    </body>
</html>

JQ---表單驗證（使用者名稱、郵箱）

2015-11-30：表單驗證使用者名稱長度、郵箱格式； <!DOCTYPE html> <html> <head> <meta

微信小程式表單輸入驗證（手機號、郵箱驗證、輸入非空）

wxml: <form bindsubmit='formSubmit'> <view class='form'> <text class='label'>姓名<text class='re

表單驗證（為後期功能完善添加）

隱藏 ont with length type nbsp ava dex www. 一、表單驗證是否輸入為空，如果為空彈出alert。 function validate_required(field,alerttxt) { with (field) { if (valu

登錄頁面的表單驗證（登錄+密碼）

數據 jquer 文件名 kit 存在 -1 ror http java 1.寫項目的過程中避免不了的就是登錄界面。登錄界面需要表單驗證。做個整理，下次使用的時候就更加方便，不用去翻文檔啦！效果圖如下： HTML部分代碼：<!DOCTYPE html><h

用 jQuery 實現表單驗證（轉載）

失去焦點 cli on() 獲得 itl 文本框特殊體驗格式 jQuery 官方 API 地址： http://api.jquery.com/ 在線引用 jQuery：http://code.jquery.com/ ——選自《鋒利的jQuery》（第2版）第5章的

EditText表單驗證（二）

實現 FormValidation package data; import android.content.Context; import android.support.annotation.NonNull; import android.view.View; import

EditText表單驗證（三）

說明綜合EditText表單驗證（一）與EditText表單驗證（二）。使用 AutomaticCheckHandle package data; import android.content.Context; import android.support.anno

Element表單驗證（1）

首先要掌握Element官方那幾個表單驗證的例子，然後才看下面的教程。 Element主要使用了async-validator這個庫作為表單驗證 async-validator主要分成三部分 Validate Options Rules 其中，對於

js實驗-表單驗證（正則表示式）

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <script src="./1.js"></s

input表單驗證（全面）

1、英文字母 1 <script type="text/javascript"> 2 //驗證只能是字母 3 function checkZm(zm){ 4 var zmReg=/^[a-zA-Z]*$/; 5 if(zm!=""&&!zmReg.t

jQuery之Validate表單驗證（一）

jQuery 是一個快速、簡單的JavaScript 庫，它簡化了HTML 檔案的traversing，事件處理、動畫、Ajax 互動，從而方便了網頁製作的快速發展。 jQuery Validate 外掛為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單。廢話不多說，開始dem

學習springBoot 進階表單驗證（四）

現在用一個新的springBoot專案來繼續學習，所有的配置都是和springBootdemo一樣只是名字換了一下 SpringBootUpgrade 新專案現在修改一下新增的方法，不在直接傳數值，而是直接傳一個Girl物件到後臺新增修改後啟動專案去測

Vue element 自定義表單驗證（手機號舉例）

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">

表單驗證（正則表示式）

表單驗證是為了使用者友好提示而設計的，當用戶填寫如身份證、IP、日期、電話等如果輸入錯誤的則會提示。不多說看程式碼： public static class ValidationStrUtil { //驗證電話號碼 public static bool isTele

微信小程式開發之表單驗證（WxValidate使用）

微信小程式的開發框架個人感覺大體上跟VUE是差不多的，但是他的表單元件沒有自帶的驗證功能，因此開發小程式的表單驗證時候一般有兩種方法，一是自己裸寫驗證規則，但是需要比較紮實的正則表示式基礎，一種是利用官方社群開發的WxValidate外掛進行表單驗證。 WxValidat

js正則表單驗證（trim封裝）

筆記見本地js特效day05，規律: 座機驗證：匹配電話號碼:開頭3-4位（首位為0），後面7或8位。 (樞紐城市的座機以0開頭。人口多後8位，人口少後

通過ajax和json進行表單驗證（非同步載入）

function add() { var name = $("#name").val(); $.ajax({ type: "POST", url: "api/addAction",

Javascript_06_表單驗證（離開單項，輸入框後提示資訊）

Javascript_06_ 表單驗證（離開單項，輸入框後提示資訊）說明：對於必須輸入的入力框，游標離開（使用 onblur方法）時進行檢查。假如有錯，紅色的提示資訊直接在該畫面的這個輸入框的後面顯示出來，並把游標重新定向到這個輸入框。待解決問題： ① 記憶體

php獲取表單內容（$_GET，$_POST, $_REQUEST）

php獲取表單內容 HTML <form action="11foo.php" method="post"> <table border="1" cellpadding="1"

S實現表單內容驗證、阻止表單提交（onsubmit）

onsubmit屬性只在 <form> 表單中使用。 onsubmit事件是當表單提交時進行相關JS操作的一個事件。 onsubmit事件會在表單中的確認按鈕被點選時發生。當該事件觸發的函式中返回false時，表單就不會被提交。 <!DOCTYPE h

JQ---表單驗證（使用者名稱、郵箱）

相關推薦