如何在form中调用js表单验证

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在form中调用js表单验证相关的知识，希望对你有一定的参考价值。

参考技术A

比如有个表单

<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>


js验证函数：

function validateForm()

var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
 
  alert("First name must be filled out");
  return false;
 


当提交表单的时候就会触发验证，运行结果：

 参考技术B 可以在submit按钮上添加onclick事件。通过创建function函数进行验证，全部通过后执行form.submit()，错误则利用alert或者innerhtml显示错误信息。 参考技术C <form action="" onsubmit="表单验证方法"></form> 参考技术D <head>
<script type="text/javascript">
function checkForm(user)
var uname=frm.value;
if(!uname)
alert("用户名不能为空!");
uname.focus();
return;


</script>
</head>
<body>
<form name="frm" method="post" action="">
<input name="user" type="text" onBlur="checkForm(this);">
</body> 第5个回答  2015-07-10 表单验证插件jquery.validate.js 这个很方便啊

使用JS对form的内容验证失败后阻止提交

1.form的两个事件

 

submit，提交表单，如果直接调用该函数，则直接提交表单

onSubmit，提交按钮点击时先触发，然后触发submit事件。如果不加控制的话，默认返回true，因此表单总能提交。

2. JS的校验

通过在JS中用document.myform.name.value,来得到用户的每一个输入 ，进行校验，当完全通过时，返回TRUE，反之返回false。

3. 页面代码实现

/*

<form name="testform"  action="hello.html"  method="post" onSubmit="return check();">

  <input type="text" name="name">

  <input type="submit" value="提交">

</form>

*/

4. JS的实现

function check(){
    if (document.testform.name.value=="admin")    {        
        alert("姓名不正确");        
        return false;    
        }
    else{
        return true;
        }
}

5.说明

 这里注意onSubmit的写法，千万不要写成：“check（）”，这样当检验不能通过的时候不会提交表单。









以上是关于如何在form中调用js表单验证的主要内容，如果未能解决你的问题，请参考以下文章

jquery.validate.min.js表单验证问题

js表单验证的问题

JS表单验证代码

如何在 Angular Js 中使用名称或 id 属性验证表单

使用JS对form的内容验证失败后阻止提交

如何将redux与antd表单验证集成