如何創建 html5 自定義驗證？

Question

我在提交之前使用 html 5 表單驗證來驗證我的表單，如果有效，則提交，但我需要驗證我的用戶注冊表單，所以它需要驗證密碼確認值是否等於 camp 密碼，下面是我的表單示例：

<form>
    <label>Login:</label>
    <input type="text" name="login" id="login"/><br/>
    <label>Password:</label>
    <input type="password" name="pass" id="pass"/><br/>
    <label>Password Confirm:</label>
    <input type="password" name="pass_conf" id="pass_conf"/><br/>

    <input type="submit"/>
</form>

或者在 jsfiddle 中

如何為默認驗證之類的工作創建自定義驗證？

Answer 1

好吧，您可以使用JQuery並附加一個要為密碼選擇的屬性，以通過input事件相互驗證。 使用setCustomValidity（）設置受影響的輸入消息，以在提交表單時覆蓋默認消息。

請參閱更新的小提琴 。

正如您在小提琴中看到的，您要做的就是添加一個屬性data-equal-id其中屬性值必須是要測試的密碼輸入元素的ID。

的HTML

<h1>How to create html5 validation for password confirm?</h1>
<hr>
<form>
    <label>Login:</label>
    <input type="text" name="login" id="login"/><br/>
    <label>Password:</label>
    <input type="password" name="pass" id="pass"/><br/>
    <label>Password Confirm:</label>
    <input type="password" name="pass_conf" id="pass_conf" data-equal-id="pass" /><br/>
    <input type="submit"/>
</form>

Java腳本

$('[data-equal-id]').bind('input', function() {
    var to_confirm = $(this);
    var to_equal = $('#' + to_confirm.data('equalId'));

    if(to_confirm.val() != to_equal.val())
        this.setCustomValidity('Password must be equal');
    else
        this.setCustomValidity('');
});

Answer 2

您可以嘗試將此代碼放在標頭中：

<script>
document.getElementById('myform').onsubmit = function() {

    if(!validateForm()){ // call your validation function
        alert('fail!'); // remove this
        return false; // prevent the form to submit
    }
}

// your validation function
// compares that the passwords are equal
function validateForm(){
    var pass = document.getElementById('pass').value;
    var pass_conf = document.getElementById('pass_conf').value;

    if(pass == pass_conf){
        return true;
    }else{
        return false;
    }

}
</script>

還將ID“ myform”放入您的表單（或您想要的名稱，但在第一行中進行更改）

Answer 3

使用jQuery這樣有趣的事情怎么樣？

$('input[type="password"]').keyup(function() {
  var pass=$('#pass').val();
  var conf=$('#pass_conf').val();
  if (pass == conf)
    $('input[type="submit"]').removeAttr('disabled');
  else
    $('input[type="submit"]').attr('disabled', 'disabled');
});

故障...

• 我正在按鍵盤上的鍵，因此每次在密碼字段中按一個鍵時，該功能都會觸發。
• 我正在獲取兩個密碼字段的值，並進行比較。
• 如果值相同，則啟用提交按鈕。
• 如果值不同，則禁用提交按鈕。

很簡單，但是可以。 這是一個演示： http : //codepen.io/anon/pen/GxAyC/

（注意-我在演示中添加了其他一些視覺增強功能，以顯示可以完成的操作）

Answer 4

您正在使用 HTML5 進行客戶端表單驗證，並希望在提交表單之前驗證您的表單。 您的表單包含三個輸入，您唯一的驗證標准是兩個密碼字段都匹配。

最簡單的方法是編寫自定義提交處理程序腳本：

const handleFormSubmit = (event) => {
  event.preventDefault();
  form = event.target;
  if (form.pass === form.pass_conf) {
     form.submit();
  }
}

上面的preventDefault()停止了默認的表單提交行為，因此您可以執行檢查。 然后檢查兩個密碼字段的值是否相等。 如果是，請繼續提交表單。

要使用，請通過監聽submit事件將自定義處理程序附加到您的表單：

const form = document.querySelector('form');
form.addEventListener('submit', handleFormSubmit);

在上下文中應用於提供的示例表單：

<form>
  <label>Login:</label>
  <input type="text" name="login" id="login"/><br/>
  <label>Password:</label>
  <input type="password" name="pass" id="pass"/><br/>
  <label>Password Confirm:</label>
  <input type="password" name="pass_conf" id="pass_conf"/><br/>

  <input type="submit"/>
</form>

<script>
  const form = document.querySelector('form');
  form.addEventListener('submit', handleFormSubmit);

  const handleFormSubmit = (event) => {
    event.preventDefault();
    form = event.target;
    if (form.pass.value === form.pass_conf.value) {
       form.submit();
    }
  }
</script>