javascript
可用来在数据被送往服务器前对 html
表单中的这些输入数据进行验证。
表单数据经常需要使用 javascript 来验证其正确性:
验证表单数据是否为空?
验证输入是否是一个正确的email
地址?
验证日期是否输入正确?
验证表单输入内容是否为数字型?
必填(或必选)项目
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false
,否则函数的返回值则为 true
(意味着数据没有问题):
function validateForm(){ var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("姓必须填写"); return false; }}
E-mail 验证
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点号:
function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos=x.length){ alert("不是一个有效的 e-mail 地址"); return false; } }
今天的练习 写的不好 没时间细化 直接贴代码了
nbsp;html> <meta> <title>登录页面</title> <link> <script></script> <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> --> <!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> --> <p> </p><p> </p>
js
function but1() { but2(); but3(); but4(); but5(); but6(); } function but2() { var pwd1=document.getElementById('pwd1').value; var pwd2=document.getElementById('pwd2').value; if (pwd1=="") { document.getElementById('worr3').innerHTML="密码不能为空"; } if (pwd2=="") { document.getElementById('worr').innerHTML="密码不能为空"; } try{ if (pwd1===pwd2) { }else{ throw '密码不一致'; } }catch(err){ document.getElementById('worr').innerHTML=" "+ err +" "; // document.getElementById('worr').style.color='red'; } } function but3() { var user=document.getElementById('user').value; if (user=="") { document.getElementById('worr1').innerHTML="用户名不能为空"; } var name=document.getElementById('name').value; if (name=="") { document.getElementById('worr2').innerHTML="昵称不能为空"; } } function but4() { var email=document.getElementById('email').value; if (email=="") { document.getElementById('worr4').innerHTML="邮箱不能为空"; }else{ var atpos=email.indexOf("@"); var dotpos=email.lastIndexOf("."); if (atpos=email.length){ document.getElementById('worr4').innerHTML="不是一个有效的 e-mail 地址"; } } } function but5() { var phone=document.getElementById('phone').value; if (phone=="") { document.getElementById('worr5').innerHTML="手机号不能为空"; }else{ var reg = /^0?1[3|4|5|8][0-9]\d{8}$/; if (reg.test(phone)) { alert("号码正确~"); }else{ document.getElementById('worr5').innerHTML="号码有误~"; }; } } function but6() { var user=document.getElementById('user').value; var name=document.getElementById('name').value; var pwd2=document.getElementById('pwd2').value; var email=document.getElementById('email').value; var phone=document.getElementById('phone').value; document.getElementById('worr6').innerHTML=" "+user+" "+name+" "+pwd2+" "+email+" "+phone; }
以上就是JavaScript 表单验证学习笔记的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号