form表单实例

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

 5         <title>javascript form表单</title>

 6     </head>

 7     <script>

 8         function validataForm(form){

 9             // var x=document.forms["myForm"]["fname"].value

10             var y=form.fname.value

11             console.log(y)

12             if(x==null || x==""){

13                 alert("请输入您的姓名")

14                 return false

15             }

16         }

17     </script>

18     <body>

19         <form action="JavaScript 条件运算符.html" name="myForm" onsubmit="return validataForm(this)" method="post">

20             姓名：<input type="text" name="fname" required="required">

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

22         </form>

23     </body>

24 </html>

JavaScript验证输入的数字

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

 5         <title>javascript form表单验证输入</title>

 6     </head>

 7     <body>

 8         <h1>javascript 验证输入</h1>

 9         <p>请输入1~10之间的数字。</p>

10         <input type="text" id="num">

11         <button type="button" onclick="myFunction()">提交</button>

12         <p id="demo"></p>

13         <script>

14             function myFunction(){

15                 var x, text

16                 // 获取输入的num值并赋值给x

17                 x = document.getElementById("num").value;

18                 // 如果 x不是数字或x<1或x>10 返回输入错误

19                 if(isNaN(x) || x<1 || x>10){

20                     text = "输入错误"

21                 }

22                 // 否则返回输入正确

23                 else{

24                     text = "输入正确"

25                 }

26                 document.getElementById("demo").innerHTML=text;

27             }

28         </script>

29     </body>

30 </html>

html自动表单验证

html表单也可以通过浏览器自动验证。

如果表单中某字段为空，可以通过required属性阻止表单提交

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8">

 5         <title>javascript form表单</title>

 6     </head>

 7     <script>

 8         function validataForm(form){

 9             // var x=document.forms["myForm"]["fname"].value

10             var y=form.fname.value

11             console.log(y)

12             if(x==null || x==""){

13                 alert("请输入您的姓名")

14                 return false

15             }

16         }

17     </script>

18     <body>

19         <form action="JavaScript 条件运算符.html" name="myForm" onsubmit="return validataForm(this)" method="post">

20             //required 属性控制该字段是否为空

21             姓名：<input type="text" name="fname" required="required">

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

23         </form>

24     </body>

25 </html>

邮箱验证

邮箱需求：

输入一个邮箱地址，并返回邮箱地址是否合法：

1、邮箱地址必须包含@符号和点号.，且邮箱开头不能是@，且@之后需要一个点好；

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="utf-8" content="text/html">

 5         <title>javascript form表单验证之邮箱验证</title>

 6     </head>

 7     <script>

 8         function validataForm(){

 9             // 先获取表单中的email值并赋值给x

10             var x = document.forms["myForm"]["emial"].value;

11             console.log(x)

12             // x是否包含@字符

13             console.log(x.indexOf("@"));

14             var atops = x.indexOf("@");

15             // x是否包含.

16             var dotops = x.indexOf(".");

17             // 如果@<1或者.<@+2或者@+2大于等于邮箱长度返回false，且弹出不是一个有效邮箱

18             if(atops<1||dotops<atops+2||atops+2>=x.length){

19                 alert("不是一个有效的邮箱")

20                 return false;

21             }

22             else{

23                 alert("got it...")

24                 return true;

25             }

26

27         }

28     </script>

29     <body>

30         <form action="" name="myForm" method="post" onsubmit="validataForm()">

31             Email: <input type="text" name="emial">

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

33         </form>

34     </body>

35

36 </html>

巴特西

JavaScript表单form

form表单实例

html自动表单验证

邮箱验证

最新文章

热门文章