javascript 使用带有一些自定义函数的 jquery 验证名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18958822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
validate name with jquery with some custom functions
提问by lost
I am working on simple form validation with jQuery
我正在使用 jQuery 进行简单的表单验证
In fact I used jQuery plugin to validate email address field, now I wanna put an individual validation for namefield I tried it too, but it's not working and I am unable to figure out the problem behind.
事实上，我使用 jQuery 插件来验证电子邮件地址字段，现在我想对name字段进行单独验证，我也尝试过，但它不起作用，我无法找出背后的问题。
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and an email address.</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script>
$(function() {
$( "#myform" ).validate({
rules: {
name: {
required: true,
minlength: 4,
maxlength: 20,
customvalidation: true
}
},
messages: {
name: {
required: "Dude, enter a name",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}
}
});
$.validator.addMethod("customvalidation",
function(value, element) {
return /^[A-Za-z\d=#$%@_ -]+$/.test(value);
},
"Sorry, no special characters allowed"
);
});
</script>
</head>
<body>
<div id="navbar">
<ul id="nav">
<li><a id="clickBack" href="backPage.htm">clickBack</a></li>
<li><a id="clickForward" href="forwardPage.htm">goForward</a></li>
</ul>
</div><br><br>
<label for="field"> Name: </label>
<input class="left" id="name" name="name" minlength="4" class="required name"/>
<br/>
<form id="myform" method="post" action="">
<label for="field">Email: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true,
email: true
}
}
});
</script>
</body>
</html>
need some guidance... Thanks.
需要一些指导...谢谢。
回答by coder
Try using this best JQuery validation plugin
尝试使用这个最好的 JQuery 验证插件
username: {
required: true,
minlength: 2
},
messages: {
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
If you want custom validation you can try this:
如果你想要自定义验证，你可以试试这个：
$.validator.addMethod("customvalidation", function(value, element) {
return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
}, "Username must contain only letters, numbers, or dashes.");
回答by Stephen James
Hi a few points which might help this work :
嗨，以下几点可能有助于这项工作：
- Try use an id that is not "reserved" or ambiguos (since
nameis already an attribute of the element it could be misleading. When I got your script working on my side, it would work withid="firstName"for eg. but notid="name") - Make sure the element you're validating is in the form you're running the validation on (in your code sample, the name element is sitting outside
myform - Combine the two
$("#myform").validate(...)methods in two different script blocks, you don't need a seperate one for email and name, you can list them together!
- 尝试使用不是“保留”或模糊的 id（因为
name它已经是元素的一个属性，它可能会产生误导。当我让你的脚本在我身边工作时，它可以id="firstName"用于例如。但不是id="name"） - 确保您正在验证的元素在您运行验证的表单中（在您的代码示例中，名称元素位于外面
myform - 将这两种
$("#myform").validate(...)方法组合在两个不同的脚本块中，您不需要将电子邮件和姓名分开一个，您可以将它们一起列出！
Hope that helps, good luck!
希望能帮到你，祝你好运！
