我在验证一个简单的输入文本字段时遇到了一些麻烦。我想要的是防止某些特殊情况的发生，但我就是找不到解决办法。
我需要防止以下内容:
- 数字，防止输入数字并验证是否有任何粘贴到字段中。
- 空格，字段必须是全名，在姓和名之间有一个空格。所以我想防止人们输入
a a或a a或完全空白，它必须至少包含6个字母。 - 尽可能避免使用除
^、~、´以外的特殊字符。
我搜索了保持数字的方法，并找到了这个正则表达式/^[a-za-z]+$/，它工作。
但是我找不到解决空格问题的方法。
如果您正在使用jQuery验证，下面的内容可能会对您有所帮助。
首先，您可以将模式更改为以下内容:
const pattern = /^[A-Z][a-z']+ [A-Z][a-z']+$/;
然后为模式的验证插件检查添加一个方法。
$.validator.methods.checkFullName = function(value, element) {
return this.optional(element) || /^[A-Z][a-z']+ [A-Z][a-z']+$/.test(value);
}
注意:至于长度限制，这是可以讨论的。有些名字可以短于3个字符。只要让他们要求每个名字的开头至少大写字母和一个或多个小写字母。如果您需要像"O'Hare"这样的名称，那么您需要将其更改为以下内容:/^[A-Z][A-Za-z'.]* [A-Z][A-Za-z']*$/。这样，像"A. O'Hare"这样的名称将是有效的。模式完全取决于你，但我会试着找到一个更常见的模式。单独验证名字和姓氏可能是一个更好的主意。
完整的示例
我改编了下面的例子:
"如何在两分钟内设置基本的jQuery表单验证">- SitePoint
/* jquery.validator-methods-checkFullName.js */
(function($) {
$.validator.methods.checkFullName = function(value, element) {
return this.optional(element) || /^[A-Z][a-z']+ [A-Z][a-z']+$/.test(value);
}
})(jQuery);
$(function() {
$("form[name='registration']").validate({
rules: {
fullname: {
required: true,
checkFullName: true
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 8
}
},
messages: {
fullname: "Please enter your full name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long"
},
email: "Please enter a valid email address"
},
submitHandler: function(form) {
form.submit();
}
});
});@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<!-- See: https://www.sitepoint.com/basic-jquery-form-validation-tutorial/ -->
<div class="container">
<h2>Registration</h2>
<form action="" name="registration">
<label for="fullname">First Name</label>
<input type="text" name="fullname" id="fullname" placeholder="John Doe" />
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com" />
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●" />
<button type="submit">Register</button>
</form>
</div>附加的方法插件，增加了一个pattern方法。
请确保您包含additional-methods.min.js脚本。
$(function() {
$("form[name='registration']").validate({
rules: {
fullname: {
required: true,
pattern: /^[A-Z][a-z']+ [A-Z][a-z']+$/
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 8
}
},
messages: {
fullname: {
pattern: "Please enter your full name"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 8 characters long"
},
email: "Please enter a valid email address"
},
submitHandler: function(form) {
form.submit();
}
});
});@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* Styles */
* {
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans";
font-size: 14px;
}
.container {
width: 500px;
margin: 25px auto;
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<!-- See: https://www.sitepoint.com/basic-jquery-form-validation-tutorial/ -->
<div class="container">
<h2>Registration</h2>
<form action="" name="registration">
<label for="fullname">First Name</label>
<input type="text" name="fullname" id="fullname" placeholder="John Doe" />
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="john@doe.com" />
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="●●●●●" />
<button type="submit">Register</button>
</form>
</div>如果你想正确地添加新方法，你可以使用:
/* jquery.validator-methods-regex.js */
(function($) {
$.validator.addMethod('regex', function(value, element, regex) {
var re = typeof regex == 'string' ? new RegExp(regex) : regex;
return this.optional(element) || re.test(value);
});
})(jQuery);
$(function() {
$("form[name='registration']").validate({
rules: {
fullname: {
required: true,
regex: /^[A-Z][a-z']+ [A-Z][a-z']+$/
}
}
});
});