Javascript 如何创建html5自定义验证？

我使用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>

登录：


密码：


密码确认：

---

如何为默认验证之类的工作创建自定义验证？

您可以尝试将以下代码放在标题中：

<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>

document.getElementById（'myform'）。onsubmit=function（）{
如果（！validateForm（））{//调用验证函数
警报（'fail！'）；//删除此
return false；//防止表单提交
}
}
//您的验证功能
//比较密码是否相等
函数validateForm（）{
var pass=document.getElementById（'pass'）。值；
var pass_conf=document.getElementById（'pass_conf'）.value；
if（pass==pass\u conf）{
返回true；
}否则{
返回false；
}
}

---

还可以将id“myform”添加到表单中（或您想要的名称，但在第一行更改）

您可以使用JQuery并附加一个要为密码选择的属性，以便通过

输入

事件相互验证。使用setCustomValidity（）将受影响输入的消息设置为在提交表单时覆盖默认消息

请参阅更新的

正如您在fiddle中看到的，您所要做的就是添加一个属性

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>

---

使用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');
});

崩溃

• 我正在关闭keyup，所以每次按下键盘上的某个键时 该函数将触发的密码字段
• 我获取两个密码字段的值，并比较它们
• 如果值相同，我将启用submit按钮
• 如果值不同，我将禁用submit按钮

很简单，但它可以工作。下面是一个演示：

---

（注意-我在演示中添加了一些其他视觉增强功能，以显示可以执行的操作）

data equal id是html默认属性还是自定义属性？它是自定义属性

$('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');
});