我一直在努力创建一个包含用户名、密码等字段的表单。我想在单击提交按钮时进行验证。
我试图从我的边框颜色中获得警报。所有字段都有效我的边框必须变为绿色如果有任何错误，它应该变为红色。
任何人对我的问题有任何想法
如果有人有任何建议？
问问题
12157 次
14 回答
18
您可以使用 jquery 插件....在这里。JQuery 表单验证自定义示例
于 2012-10-13T12:21:44.397 回答
6
使用 jQuery 验证插件：http ://docs.jquery.com/Plugins/Validation
在此插件中，您必须为字段定义验证规则。您还可以为给定的验证规则设置给定字段的错误消息。
此插件将类添加到有效和无效字段。
您必须为该课程提供 css。
例如：
$(document).ready(function(){
$(".my_form").validate({
rules:{ // validation rules
email_address: {
required:true,
email: true
},
password:{
minlength: 6
},
confirm_password: {
equalTo:"#password"
}
},
messages: {
email_address: {
required: "Please enter email address",
email: "Please enter valid email address",
},
/*
likewise you can define messages for different field
for different rule.
*/
}
errorClass: "signup_error",
/*This is error class that will be applied to
invalid element. Use this class to style border.
You can give any class name.*/
});
});
一旦您点击提交按钮，并且字段无效，插件将类添加到您指定为的元素中errorClass，并且当您在字段中输入有效值时，插件将删除该类并'valid'默认添加类。
您可以使用这两个类使用简单元素来设置有效和无效元素的样式。
.valid {
border-color:"green"
}
.signup_error {
border-color:"red"
}
希望这可以解决您的问题。
于 2012-11-05T12:47:46.157 回答
4
Js我要走的路。如果你用谷歌搜索，你可以找到一些非常好的 jQuery 验证器。
要自定义构建一个简单的验证器，我会这样
<form class="validator">
<input type="text" name="my-input-1" data-validator="integer"/>
<input type="text" name="my-input-2" data-validator="email"/>
....
</form>
<script>
$("form.validator").submit(evt, function() {
var errors = 0;
$(this).find('[data-validator]').each(function(e, i) {
var value = $(this).value;
switch($(this).data('validator')) {
case 'integer':
if (!(parseFloat(value) == parseInt(value)) && !isNaN(value)) {
$(this).css({'border-color': '#FF0000'});
errors++;
} else
$(this).css({'border-color': '#000000'});
break;
case 'email':
if (..... // regex validate email ...) {
$(this).css({'border-color': '#FF0000'});
errors++;
} else
$(this).css({'border-color': '#000000'});
break;
}
});
if (errors > 0) {
// If you want to prevent default event execution no matter what
evt.preventDefault();
// If you want you other attached events to NOT run
evt.stopPropagation();
// signal failure
return false;
}
// All is well, go on
return true;
});
</script>
当然，为每个验证器构建函数总是一个好习惯，甚至更好地将整个东西包装在一个 jQuery 小部件中（我建议使用 jQuery Widget Factory），这将允许您在未来增强它并让您灵活地进行更改
于 2012-10-13T11:58:15.523 回答
2
您可以使用 DOJO 库来验证表单字段。这很容易实现。
下面给出了实现dojo的教程
http://dojotoolkit.org/documentation/tutorials/1.6/validation/
这是您可以看到的工作示例...
http://dojotoolkit.org/documentation/tutorials/1.6/validation/demo/dijitcheck.html
于 2012-11-03T10:37:24.153 回答
1
我为一般的 javascript 目的制作了一个验证库。它甚至是单元测试的！你也可以很容易地覆盖任何你想要的东西：https ://github.com/parris/iz
至于突出显示无效字段，您可以更改该字段的样式或添加一个类。下面的示例只是更改了输入的背景颜色并添加了一条消息。
工作示例：http: //jsfiddle.net/soparrissays/4BrNu/1/
$(function() {
var message = $("#message"),
field = $("#field");
$("#the-form").submit(function(event) {
if (iz(field.val()).alphaNumeric().not().email().valid){
message.text("Yay! AlphaNumeric and not an email address");
field.attr("style","background:green;");
} else {
message.text("OH no :(, it must be alphanumeric and not an email address");
field.attr("style","background:red;");
}
return false;
});
});
验证器称为 iz。它只是让您将验证链接在一起，它会告诉您是否所有内容都通过了，或者您是否检查了“错误”对象，它会为您提供更多细节。除此之外，您可以指定自己的错误消息。检查 github 上的文档。
这里发生的事情是，一旦页面准备就绪，我们正在为提交事件设置一个点击处理程序。return false;在提交回调的底部阻止表单提交。如果你return true;的表格将继续。您也可以使用 return false 而不是 return false，event.preventDefault();但我更喜欢 return 语法以保持一致性。在具有多个表单元素的现实世界中，您可能会执行以下操作（伪代码）：
var passed = true;
if (check field 1 is false)
...
if (check field 2 is false)
...
if (check field n is false)
passed = false
style and add message
if passed
return true
else
return false
if 语句检查验证规则并相应地更改 DOM。通过这种方式，您可以提供所有通过和失败字段的完整列表，并完整描述不正确的内容。
于 2012-11-04T03:31:31.530 回答
1
我过去使用过这个插件，使实现变得非常容易，并且有很好的文档和示例。
于 2012-11-05T11:11:04.330 回答
1
您需要的服务器端验证示例。你可以试试看。
<?php
error_reporting(0);
$green = "border: 3px solid green";
$red="border: 3px solid red";
$nothing="";
$color = array ("text1"=>$nothing , "text2"=>$nothing) ;
if ( $_POST['submit'] ) {
if($_POST['text1']) {
$color['text1'] = $green;
}
else $color['text1'] = $red;
if($_POST['text2'] ) {
$color['text2'] = $green;
}
else $color['text2'] = $red;
}
?>
<form method="post">
<input type="text" name="text1" style="<?php echo $color ['text1']?>" value="<?php echo $_POST['text1']?>">
<input type="text" name="text2" style="<?php echo $color ['text2']?>" value="<?php echo $_POST['text2']?>">
<input type="submit" name="submit">
</form>
笔记
- 始终清理用户输入。
- error_reporting off 根本不是一个好习惯。我这样做是因为这不是生产环境的代码。
- 在尝试使用 isset 或类似的函数访问 post 数组之前进行检查。
- 使用前请务必检查变量是否存在。
于 2012-11-09T17:39:17.187 回答
1
我的建议是使用 jQuery
尝试首先创建多个输入并给它们一个类
html:
<input type="text" class="validate" value="asdf" />
<input type="text" class="validate" value="1234" />
<input type="text" class="validate" value="asd123" />
<input type="text" class="validate" value="£#$&" />
<input type="text" class="validate" value=" " />
然后使用下面的代码来看看它是如何工作的
jQuery：
// Validate Function
function validate(element) {
var obj = $(element);
if (obj.val().trim() != "") {
// Not empty
if (!/^[a-zA-Z0-9_ ]{1,10}$/.test(obj.val())) {
// Invalid
obj.css('border-color', '#FAC3C3');
if (!obj.next().hasClass('error'))
{ obj.after('<span class="error">Please use letters or numbers only and not more than 10 characters!</span>'); }
else
{ obj.next().text('Please use letters or numbers only and not more than 10 characters!'); }
} else {
// Valid
obj.css('border-color', 'lightgreen');
if (obj.next().hasClass('error'))
{ obj.next().remove(); }
}
} else {
// Empty
obj.css('border-color', '#FAC3C3');
if (obj.next().hasClass('error'))
{ obj.next().text('This field cannot be empty!'); }
else
{ obj.after('<span class="error error-keyup-1">This field cannot be empty!</span>'); }
}
}
$(document).ready(function() {
// Each
$('.validate').each(function() {
// Validate
validate(this);
// Key up
$(this).keyup(function() {
// Validate
validate(this);
});
});
});
jsfiddle：http: //jsfiddle.net/BerkerYuceer/nh2Ja/
于 2012-11-07T14:05:01.840 回答
0
嗨，您可以在表单字段中使用 html5“必需”和“模式”。如果错误，您将获得红色边框，如果正确，您将获得绿色边框。如果颜色不是您想要的，您甚至可以设置 :valid 和 :invalid 输入字段的样式。我从来没有测试过，但为什么不呢，总比没有好；）
于 2012-11-09T15:24:29.457 回答
0
检查下面的链接，这里我只检查了空字段，如果字段为空，则更改输入字段 ID，这将更改输入字段边框颜色。 http://jsfiddle.net/techprasad/jBG7L/2/
我用过
$("#myb").click(function(){
那是按钮单击事件，但您可以使用提交事件。
于 2012-11-07T06:57:04.297 回答
0
可能最简单的方法是使用这个 javascript： http: //livevalidation.com/examples#exampleComposite
我认为它最适合你的描述。
于 2012-11-05T17:02:59.523 回答
0
$("#btn").click(function(){
// Check all of them
if( $.trim($("#file").val()) == ""){
$("#file").css("border","1px solid #ff5555");
}else{
$("#file").css("border","1px solid #cccccc");
if( $.trim($("#showboxResimBaslik").val()) == ""){
$("#showboxResimBaslik").css("border","1px solid #ff5555");
}else{
$("#showboxResimBaslik").css("border","1px solid #cccccc");
if( $.trim($("#showboxResimEtiket").val()) == ""){
$("#showboxResimEtiket").css("border","1px solid #ff5555");
}else{
if($.trim($("#showboxResimSehir").val()) == ""){
$("#showboxResimSehir").css("border","1px solid #ff5555");
}else{
$("#showboxResimSehir").css("border","1px solid #cccccc");
$("#resimYukleForm").removeAttr("onSubmit");
$('#resimYukleForm').bind('submit', form_submit);
}
}
}
}
});
于 2012-10-17T09:38:21.960 回答
0
这就是我要说的是在 jQuery 中执行此操作的简短精确和简洁的方法。
HTML：
<form id="myform" name="form" action="http://www.google.com">
<div class="line"><label>Your Username</label><input class="req" type="text" /></div>
<div class="line"><label>Your Password</label><input class="req" type="password" /></div>
<div class="line"><label>Your Website</label><input class="req" type="text" /></div>
<div class="line"><label>Your Message</label><textarea class="req"></textarea></div>
<div class="line"><input type="submit" id="sub"></submit>
</form>
CSS：
.line{padding-top:10px;}
.inline input{padding-left: 20px;}
label{float:left;width:120px;}
jQuery：
$(function() {
function validateform() {
var valid = true;
$(".req").css("border","1px solid green");
$(".req").each(function() {
if($(this).val() == "" || $(this).val().replace(/\s/g, '').length == 0) {
$(this).css("border","1px solid red");
valid = false;
}
});
return valid;
}
$("#sub").click(function() {
$('#myform').submit(validateform);
$('#myform').submit();
});
});
于 2012-11-09T04:55:12.243 回答
-1
首先学习javascript，如果你有一些js的基础知识并且需要了解逻辑，请继续阅读。首先你需要一个事件处理程序来在表单提交上运行一个函数最简单的方法是（尽管有更好的方法）
<form action="som.php" onsubmit="functionName()">
在这里形成
</form>
这将触发名为 functionname 的函数。在函数名称中，函数访问输入字段并使用正则表达式进行验证
function functionName()
{
//verification code
if(verified)
{
//code to change border to green
}
}
您需要获取输入字段并验证它们。如果您不知道如何操作，请获取一些 Javascript 书籍 如果您需要在输入值后立即进行验证，请在输入字段上使用 onchange 事件
于 2012-10-13T11:37:11.337 回答