javascript 表单验证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<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert(不是一个有效的 e-mail 地址);
return false;
}
}
今天的练习 写的不好 没时间细化 直接贴代码了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<link rel="stylesheet" href="c:\users\administrator\desktop\bootstrap-3.3.5-dist\css\bootstrap.min.css" />
<script type="text/javascript" src="dse.js" ></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> -->
</head>
<body>
<p class="p1">
<p class="p0">
<form class="form-horizontal" role="form">
<table >a
<tr>
<td align='right'><label>用户名： </label></td>
<td ><input type="text" class="form-control" id='user' " /></td>
<td align='right' id="worr1" width="150px"></td>
</tr>
<tr>
<td align='right'><label> 昵称： </label></td>
<td ><input type="text" class="form-control" id="name"/></td>
<td align='right' id="worr2" ></td>
</tr>
<tr>
<td align='right'><label>密码： </label></td>
<td ><input type="password" class="form-control" id="pwd1" /></td>
<td align='right' id="worr3"></td>
</tr>
<tr>
<td align='right'><label>确认密码： </label></td>
<td><input type="password" class="form-control" id="pwd2" /></td>
<td align='right' id="worr"></td>
</tr>
<tr>
<td align='right'><label>邮箱： </label></td>
<td > <input type="text" class="form-control" id="email" /></td>
<td align='right' id="worr4" ></td>
</tr>
<tr>
<td align='right'><label>手机号： </label></td>
<td ><input type="text" class="form-control" id="phone" /></td>
<td align='right' id="worr5" ></td>
</tr>
<tr>
<td colspan="3"><a href="#" id="a1">用户手册</a></td>
</tr>
<tr>
<td colspan="3"><button onclick ="but1()" class="btn btn-default"><label >提交</label></button></td>
<td align='right' id="worr6" ></td>
</tr>
</table>
</form>
</p>
</body>
</html>
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<1 || dotpos<atpos+2 || dotpos+2>=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 表单验证学习笔记的详细内容。