我一直在努力创建一个包含用户名，密码等字段的表单.... 我想在点击SUBMIT按钮时进行验证。
我正试图从边框颜色中获取警报。所有字段都有效我的边框必须更改为绿色如果有任何错误，它应该更改为红色。
任何人对我的问题都有任何想法
如果有人有任何建议吗？
答案 0 :(得分：18)
你可以使用jquery插件....你在这里。 JQuery Form validation custom example
答案 1 :(得分：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"
}
希望这可以解决您的问题。
答案 2 :(得分：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），这将允许您在将来增强它并保持灵活性改变
答案 3 :(得分：2)
使用此link
将此用于文本框突出显示之外的进一步使用
答案 4 :(得分：2)
您可以使用DOJO库来验证表单字段。它很容易实现。
以下是实现dojo的教程
http://dojotoolkit.org/documentation/tutorials/1.6/validation/
这是你可以看到的工作示例......
http://dojotoolkit.org/documentation/tutorials/1.6/validation/demo/dijitcheck.html
答案 5 :(得分：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;表单将继续。您也可以event.preventDefault();而不是返回false，但我更喜欢返回语法以保持一致性。在具有多个表单元素的现实世界中，您可以执行类似这样的操作（伪代码）：
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。通过这种方式，您可以提供所有已通过和失败字段的完整列表，并提供错误的完整描述。
答案 6 :(得分：1)
我过去使用过this plugin，使实现非常简单，并且有很好的文档和示例。
答案 7 :(得分：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);
});
});
});
答案 8 :(得分：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>
答案 9 :(得分：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);
}
}
}
}
});
答案 10 :(得分：0)
可能最简单的方法是使用这个javascript： http://livevalidation.com/examples#exampleComposite
我觉得最适合你的描述。
答案 11 :(得分：0)
检查下面的链接，这里我只检查空字段，如果字段为空，则更改输入字段id，这将改变输入字段边框颜色。 http://jsfiddle.net/techprasad/jBG7L/2/
我用过
$("#myb").click(function(){
是按钮点击事件，但您可以使用提交事件。
答案 12 :(得分：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();
});
});
答案 13 :(得分：0)
嗨，您可以在表单的字段中使用html5“required”和“pattern”。 如果它是错误的你会得到红色边框，如果它是正确的你会得到绿色。 如果颜色不是您想要的颜色，您甚至可以设置：valid和：invalid输入字段。 我从未测试过，但为什么不呢，它总比没有好;）
答案 14 :(得分：-1)
Firs学习javascript，如果你有一些js的基本知识，需要知道逻辑，继续阅读.. 首先，您需要一个事件处理程序来在表单提交上运行函数 最简单的方法是（虽然有更好的方法）
<form action="som.php" onsubmit="functionName()">
此处
</form>
这将触发名为functionname的函数。 在函数名称函数中，访问输入字段并使用正则表达式进行验证
function functionName()
{
//verification code
if(verified)
{
//code to change border to green
}
}
您需要获取输入字段并验证它们。如果您不知道如何操作，请获取一些Javascript书籍 如果您需要在键入值后立即验证，请在输入字段上使用on onchange事件