如何在用戶點擊其他地方時驗證表單

對於我正在創建的註冊表單，我想驗證密碼，以便用戶必須輸入包含至少一個大寫字母和至少一個數字的密碼。如何在用戶點擊其他地方時驗證表單

我已經實現了這個位置： http://jsfiddle.net/k9aHV/1/

<form action="login.php" method="post"> 
        <p><b>UserName:</b> <input type="text" required pattern="\w+" name="fname"/></p> 
        <p><b>Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password" onblur="this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');if(this.checkValidity()) form.password1.pattern = this.value;"></p> 
        <p><b>Confirm Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password1" onblur=" 
        this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same password as above' : '');"/></p> 
        <p><b>Email:</b> <input type="email" name="email"/></p> 
        <input type="submit"/> 
       </form>

目前，僅當用戶按下提交域的驗證。

如何調整我的代碼，以便在用戶從輸入字段中選擇或單擊時驗證代碼？

來源

2014-01-31 Kenshin

其中setCustomValidity'，'validity'和其他東西定義'？ –

@AshishKumar它在密碼輸入標籤上定義了onblur。 – Kenshin

它沒有定義，它在那裏被使用。必須有這個函數的定義。 –

您可以在模糊觸發本地驗證，像這樣

input.addEventListener('blur', function(e) { 
    e.target.checkValidity(); 
});

問題是你不能以編程方式觸發驗證錯誤彈出。一種解決方法是以編程方式單擊提交按鈕，但彈出窗口將只顯示第一個無效輸入元素！

更爲用戶友好的解決方案是在元素中顯示驗證消息。

看到這個JSFiddle

var idx;  
var passwordInputs = document.querySelectorAll('input[type="password"]'); 
for(idx=0; idx< passwordInputs.length; idx++) { 
    //set custom validation 
    passwordInputs[idx].addEventListener('input', function(e) { 
     if(e.target.validity.patternMismatch) { 
      e.target.setCustomValidity('Password must contain at least 6 characters, including UPPER/lowercase and numbers'); 
     } 
     else { 
      e.target.setCustomValidity(''); 
     } 
    }); 
} 

//code starting here is to show the validation message in a span element 
function showValMessage(elem, msg) { 
    var span = elem.parentNode.querySelector('span'); 
    span.innerText = msg; 
} 

var inputs = document.querySelectorAll('input'); 
for(idx=0; idx< inputs.length; idx++) { 
    var input = inputs[idx]; 

    //validate on blur 
    input.addEventListener('blur', function(e) { 
     e.target.checkValidity(); 
    }); 

    //show validation message 
    input.addEventListener('invalid', function(e) { 
     showValMessage(e.target, e.target.validationMessage); 
    }); 

    //hide validation message. There is on valid event :(
    input.addEventListener('input', function(e) { 
     if(e.target.validity.valid) { 
      showValMessage(e.target, ''); 
     } 
    }); 
}

來源

2014-01-31 08:57:06 LostInComputer

如何在用戶點擊其他地方時驗證表單

回答

相關問題