Parsley js对验证约束和自定义错误消息进行优先级排序

parsley js prioritizing the validation constraints and custom error messages

本文关键字：消息 优先级 排序 错误 自定义 js 验证 约束 Parsley      更新时间：2023-09-26

我试图使这个欧芹验证一次只显示一个确认电子邮件字段的错误消息。我尝试了各种选项，默认情况下priityenabled也设置为true。然而，仍然有两个消息显示确认电子邮件消息。

<!Doctype html>
<html>
<head>
<style>
#fullnameErr {
    display: inline-block;
}
</style>
<script src="jquery.js"></script>
<script src="parsley.js"></script>
</head>
<body>
<form id="demo-form" data-parsley-validate>
  <!-- this field is just required, it would be validated on form submit -->
  <label for="fullname">Full Name * :</label>
  <input type="text" name="fullname" data-parsley-trigger="change" data-parsley-length="[1,6]" data-parsley-errors-container="#fullnameErr" required />
  <div id="fullnameErr"></div>
  <!-- this required field must be an email, and validation will be run on
  field change -->
  <label for="email">Email * :</label>
  <input type="email" id="emailid" name="email" data-parsley-trigger="change" required />

   <label for="email">Confirm Email * :</label>
  <input type="email" name="email" data-parsley-trigger="change"  data-parsley-equalto= "#emailid" required data-parsley-stop-on-first-failing-constraint="true" />
  <!-- radio and checkbox inputs by default have to be wrapped in a parent
  elemnt (here <p>) that will have success and error classes -->
  <label for="gender">Gender *:</label>
  <p>
    M: <input type="radio" name="gender" id="genderM" value="M" required />
    F: <input type="radio" name="gender" id="genderF" value="F" />
  </p>
  <!-- here, field is not required, it won't throw any error if no checkbox
  is checked. But if checked, two at least must be checked -->
  <label for="hobbies">Hobbies (2 minimum):</label>
  <p>
    Skiing <input type="checkbox" name="hobbies" value="ski" data-parsley-mincheck="2" />
    Running <input type="checkbox" name="hobbies" value="run" />
    Eating <input type="checkbox" name="hobbies" value="eat" />
    Spleeping <input type="checkbox" name="hobbies" value="sleep" />
    Reading <input type="checkbox" name="hobbies" value="read" />
    Coding <input type="checkbox" name="hobbies" value="code" />
  <p>

  <!-- regular select input. Nothing more to add. -->
  <label for="heard">Heard us by *:</label>
  <select id="heard" required>
    <option value="">Choose..</option>
    <option value="press">Press</option>
    <option value="net">Internet</option>
    <option value="mouth">Word of mouth</option>
    <option value="other">Other..</option>
  </select>
  <!-- this optional textarea have a length validator that would be checked on keyup after 10 first characters, with a custom message only for minlength validator -->
  <label for="message">Message (20 chars min, 100 max) :</label>
  <textarea name="message" data-parsley-trigger="keyup" data-parsley-length="[20, 100]" data-parsley-validation-threshold="10" data-parsley-minlength-message = "Come on! You need to enter at least a 20 caracters long comment.."></textarea>
  <input type="submit" />
</form>
<body>
</html>

根据您的要求，第二个字段用于重新确认用户在第一个电子邮件输入中输入的电子邮件-d。因此，在第二个电子邮件输入中，您应该只使用data-parsley-equalto而不是type="email"。

因为在第二次输入时设置type="email"会导致对输入进行有效的电子邮件id验证。这是两个信息的原因。您可以将代码设置为:

<!-- this required field must be an email, and validation will be run on
  field change -->
  <label for="email">Email * :</label>
  <input type="email" id="emailid" name="email" data-parsley-trigger="change" required/>
   <label for="email">Confirm Email * :</label>
  <input name="email" data-parsley-trigger="change"  data-parsley-equalto= "#emailid" required  />

因此，当您更改第二个输入字段中的值时，它将被验证为与第一个输入字段中的值相同，而不是有效的电子邮件id。

相关文章：