文本框验证与jQuery [英] textbox validation with jquery
本文介绍了文本框验证与jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是JQuery的新手。
我想使用jquery对四个文本框进行验证。
编码已完成
< html>
< head>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css>
< script src =// code.jquery.com/jquery-1.10.2.js\">< ;;script>
< script src =// code.jquery.com/ui/1.10.4/jquery-ui.js\">< ;;script>
< link href =// netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css =stylesheet> ;
< link href =runnable.css =stylesheet/>
< script src =// code.jquery.com/jquery-1.9.1.js\">< ;;script>
< script src =// ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js\"> ;</script>
< script>
$（$ {
$（＃register-form）。validate（{
rules：{
firstname：required，
lastname： 必填，
电子邮件：{
required：true，
email：true
}，
密码：{
required：true，
minlength：5
}，
同意：必填
}，
消息：{
firstname：请输入您的名字，
姓氏：请输入您的姓氏，
密码：{
required：请提供密码，
minlength：您的密码必须在至少5个字符长
，
email：请输入一个有效的电子邮件地址，
同意：请接受我们的政策
}，
submitHandler：function（form）{
form.submit（）;
}
}）;
}）;
< / script>
< / head>
< body>
< h1>在此注册< / h1>
< form action =method =postid =register-formnovalidate =novalidate>
< div class =label>名字< / div>< input type =textid =firstnamename =firstname/>< br />
< div class =label> Last Name< / div>< input type =textid =lastnamename =lastname/>< br />
< div class =label>电子邮件< / div>< input type =textid =emailname =email/>< br />
< div class =label>密码< / div>< input type =passwordid =passwordname =password/>< br />
< div style =margin-left：140px;>< input type =submitname =submitvalue =Submit/>< / div>
< / form>
< / body>
< / html>
是否有人会检查我的程序，如果我没有给输入文本框提供任何文本，它应该显示红色的消息，但它没有显示正确的错误消息。
试试这段代码： jQuery
$（document）.ready（function（）{
$（'＃submit'）。click（function（e）{
var isValid = true;
$（'＃firstname，＃lastname，＃email，＃password'）。each（function （）{
if（$ .trim（$（this）.val（））==''）{
isValid = false;
$（this）.css（{
border：1px solid red，
background：#FFCECE
}）;
}
else {
$（this） .css（{
border：，
background：
}）;
}
}）;
if（isValid == false）
e.preventDefault（）;
}）;
}）;
提交按钮代码：
I am new to JQuery. I want to do the validation to four text box using jquery.
Coding i have done
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="runnable.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<form action="" method="post" id="register-form" novalidate="novalidate">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" /><br />
<div class="label">Password</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
</body>
</html>
Will anyone check my program,If i am not giving any text to the input text box ,while submitting it should display the red color messages , but it is not displaying the proper error messages.
解决方案
Try this code:
jQuery
$(document).ready(function () {
$('#submit').click(function (e) {
var isValid = true;
$('#firstname,#lastname,#email,#password').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
});
});
Submit Button Code :
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" id="submit" /></div>
You can see a demo of it here.
这篇关于文本框验证与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
