JavaScript之表单验证(1)


默认提交需要用submit按钮

如果想要有普通按钮做提交,需要调用表单的submit方法

表单验证就是对输入不合法的元素给出提示,重新输入,

并取消表单的提交即可

(其实就是对字符串的操作,对正则表达式的操作)

focus()获得焦点

select()全部选中

<html>

<head>

<title>damel14</title>

<script>

function checkName(){

var usernameObj = document.forms[0].username;

var username = usernameObj.value;

//var username = document.forms[0].username.value;

if(username==""||username.length<1){

alert("用户名不能为空");

usernameObj.focus();

usernameObj.select();

return false;

}

if(username.length < 5||username.length > 10){

alert("用户名长度必须在5-10之间");

usernameObj.focus();

usernameObj.select();

return false;

}

var t = true;

for(var i = 0;i<username.length;i++){

var c = username.toLowerCase().charAt(i);

if(!((c>‘a‘&&c<=‘z‘)||(c>‘0‘&&c<‘9‘)||(c==‘_‘)))

t= false;

}

if(t==false){

alert("用户名只能包含数字,字母,下划线");

return false;

}

return true;

}

function checkPass(){

var passObj = document.forms[0].password;//获取对象

var pass = passObj.value;

//var pass = document.forms[0].password.value;

if(pass.length==""||pass.length< 1){

alert("密码不能为空");

passObj.focus();//获取对象焦点

passObj.select();//选中对象

return false;

}

if(pass.length<6||pass.length>16){

alert("密码长度必须在6-16之间");

passObj.focus();

passObj.select();

return false;

}

return true;

}

function checkForm(){

return checkName()&&checkPass();

}

</script>

</head>

<body>

<form action="damel11.html" onSubmit="return checkForm()" name="myform">

用户名:<input type="text" name="username"/>

</br>

密&nbsp;&nbsp;码:<input type="text" name="password" onClick="checkName()"/>

</br>

<input type="submit" value="确定"/>

</form>

</body>

<html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-29 14:51:19

JavaScript之表单验证(1)的相关文章

用JavaScript进行表单验证

用户填写表单后提交,服务器端脚本会先验证数据,保证数据的正确性(比如数据是符合要求的内容.格式正确等)后再将数据交到数据库存储供以后使用.也可以在客户机上用JavaScript进行表单验证,比较快,用户操作效率较高.虽然用JavaScript进行表单验证有很多优点,不过有些用户可能会关闭浏览器JavaScript功能或者不支持JavaScript,因此在服务器端脚本的表单验证必不可少. 研究了<JavaScript基础教程 第九版>[美·Dori Smith,Tom Negrino] 一书中对

javaScript简单表单验证插件

 Validator = { Require : /.+/, Email : /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,     Phone : /^(0[1-9][0-9]{1,2}-[1-9][0-9]{6,7})$/, Mobile : /^((\(\d{3}\))|(\d{3}\-))?1[3,5,8]\d{9}$/, Url : /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[

第一百五十三节,封装库--JavaScript,表单验证--备注字数验证

封装库--JavaScript,表单验证--备注字数验证 效果图

Javascript:表单验证(验证空值/邮箱格式)

代码整理自w3school:http://www.w3school.com.cn 效果图: 示例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type&quo

JavaScript 正则表单验证(用户名、密码、确认密码、手机号、座机号、身份证号)

1.关于JavaScript表单验证,如果使用双向绑定的前端js框架,会更容易的多.但是博主还是建议大家不要脱离源生js本身.因为源生js才是王道. 注意: a.代码中的错误提示可能会没有,在代码中找到 "错误.jpg"  图片,自己制作一个 b.验证的判断已经完成,只需要根据自己的验证规则进行表单验证,更换自己的正则表达式. c.博主将错误提示图片插入本文档中.需要更名为  "错误.jpg",放到与html根目录下方可使用.      (错误提示图片) <!

JavaScript实现表单验证

表单验证可以通过 JavaScript 来完成 以下示例代码用于判断表单字段(Name)值是否存在,如果存在,则弹出信息,否则阻止表单提交: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证</title> 6 <script type="text/javasc

PHP / JavaScript / jQuery 表单验证与处理总结: 第①部分 PHP 表单验证与处理

PHP VERSION = 5.3.10 一.关于 $_REQUEST PHP 文档关于 $_REQUEST 的说明: 说明 默认情况下包含了 $_GET,$_POST 和 $_COOKIE 的数组. 更新日志 版本 说明 5.3.0 引入 request_order.该指令会影响 $_REQUEST 的内容. 4.3.0 $_FILES 信息被从 $_REQUEST 中移除. 4.1.0 引入 $_REQUEST. 在 php 5.3 以上版本中,php.ini 中的 request_orde

JavaScript 之表单验证(表单验证器的封装)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>        

Javascript基本表单验证

<script type="text/javascript"> function checkForm(form) { if (form.name.value == "") { alert("姓名不能为空!"); return false; } if (form.password.value.length < 6||form.password.value.length > 13) { alert("密码长度应在6-