验证使用JavaScript形式(Validate a form using JavaScript)

2019-07-29 10:57发布

我是一个初学者,我已经写了代码验证形式:

function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x==""){
alert("First name must be filled out");
return false;
  }}
  <!-- html part-->
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form><br>

这段代码的问题是按提交按钮触发validateForm功能。 如何调用函数时,物体损失焦点?

Answer 1:

按照替换您的输入元素的代码

<input type="text" onblur="return validateForm();" name="fname">

我想这就是你在找什么



Answer 2:

这是我的问题的精确解。 当用户获得某种形式的通知时,物体的损失集中:

<script>
function validate(){
var y = document.getElementById("errorResponse");
var x=document.forms["myForm"]["fname"].value;
    if (x==null || x==""){
        y.innerHTML = "Error";
    }
}
</script>

HTML表单是:

<form name="myForm">
First name: <input type="text" name="fname" onBlur = "validate()">
<div id = "errorResponse"></div>
<input type="submit" value="Submit">
</form>

该DIV可以在CSS被设计成红色,以获得用户的关注和更多的花样可以玩。



Answer 3:

<html>
<head>
<script type="text/javascript">
      function validateForm(oForm){
    var els = oForm.elements;
    for(var i = 0; i < els.length; i++){
       if('string' === typeof(els[i].getAttribute('data-message'))){
          return valEl(els[i]);
       }
    }
} 

function valEl(el){
    var method = el.getAttribute('data-valMethod');
    if('req' === method && (el.value === null || el.value === '')){
           alert(el.getAttribute('data-message'));
           return false;
    }
} 
</script>
</head>
<body>
<form name="myForm" action="#" onsubmit="return validateForm(this)" method="post">
First name: 
    <input data-message="First name must be filled out" data-valMethod="req" onchange="return valEl(this)"; name="fname"><br />
<input type="submit" value="Submit">
</form>
</body>

</html>​​​​​​​​​​​​​​​​​​​

我已经在能验证的“平变化”,另一个触发该验证每个元件上form.onsubmit()中的元素,如果有一个形式元件上所需的数据的消息属性一个功能拆分它。
由于HTML5的数据 - *属性是这些东西很方便:-)

这样你可以避免存储形式和验证脚本元素的名称,因为引用传递的元素,而不是themselfes。 这始终是一件好事。

从这里你可以展开valEl功能,以适应其他类型的验证。

唯一的限制,到目前为止是只能有一种类型的每个元素的验证,但应该是很容易得到解决。

编码愉快。 /G

PS http://jsfiddle.net/ePPnn/11/示例代码



文章来源: Validate a form using JavaScript