网页设计资源:网页表单验证常用代码例子

文章简介:表单验证代码.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
<script>
function $(id) {
return document.getElementById(id);
}
function checkUsername (username) {
var digital = /^\d+$/;
var character = /^\w+$/;
var elmt = $(‘user_error’);
if(username == null username.length < 4){
elmt.innerHTML="用户名长度不能小于4个字符,请重新输入。";
return false;
}else if(username.length > 20){
$(‘user_error’).innerHTML="用户名长度不能大于20个字符,请重新输入。";
elmt.style.display=”;
return false;
}else if(digital.test(username)) {
$(‘user_error’).innerHTML="用户名不能为全数字,请重新输入。";
elmt.style.display=”;
return false;
}else if (!character.test(username)){
$(‘user_error’).innerHTML="用户名格式有误,请重新输入。";
elmt.style.display=”;
return false;
}else{
elmt.style.display="none";
return true;
}
}

function checkEmail1(id)
{
var rule = /^[0-9a-z]+[0-9a-z\-\._]*@[0-9a-z]+[0-9a-z\-]*(\.[a-z]{2,4}){1,2}$/i;
var obj = $(id);

if(obj.value == ""){
var msg = "请输入邮箱";
$(‘email_error’).innerHTML = msg;
$(‘email_error’).style.display="";
return false;
}

if(obj.value != "" && !rule.test(obj.value)){
var msg = "邮箱格式不正确。";
$(‘email_error’).innerHTML = msg;
$(‘email_error’).style.display="";
return false;
}else{
var msg = "邮箱填写正确";
$(‘email_error’).innerHTML = msg;
$(‘email_error’).style.display="";
return true;
}
}
function checkLevel(str)
{
var total_score = 0;
var length_score = checkLength(str);
var letter_score = checkLetter(str);
var digit_score = checkDigit(str);
var symbol_score = checkSymbol(str);

if (letter_score != 0 && digit_score != 0)
{
total_score += 2;
}

if (letter_score != 0 && digit_score != 0 && symbol_score != 0)
{
total_score += 3;
}

if (letter_score == 20 && digit_score != 0 && symbol_score != 0)
{
total_score += 5;
}

total_score += length_score + letter_score + digit_score + symbol_score;

if (total_score >= 90)
{
return 6;
}
else if (total_score >= 80)
{
return 5;
}
else if (total_score >= 70)
{
return 4;
}
else if (total_score >= 60)
{
return 3;
}
else if (total_score >= 50)
{
return 2;
}
else if (total_score >= 25)
{
return 1;
}
else
{
return 0;
}
}

function checkLength(str)
{
var score = 0;
if (str)
{
var length = str.length;
if (length <= 5)
{
score = 5;
}
else if (length > 5 && length <= 10) {
score = 10;
}
else
{
score = 25;
}
}

return score;
}

function checkLetter(str)
{
var score = 0;
if (str)
{
var rule1 = /^[^A-Z]*[a-z]+[^A-Z]*$^[^a-z]*[A-Z]+[^a-z]*$/;
var rule2 = /^.*[a-z](.*[A-Z]{1,}.*)+$^.*[A-Z](.*[a-z]{1,}.*)+$/;

if (rule1.test(str))
{
score = 10;
}
else if (rule2.test(str))
{
score = 20;
}
else
{
score = 0;
}
}

return score;
}

function checkDigit(str)
{
var score = 0;
if (str)
{
var rule1 = /^[^0-9]*([0-9][^0-9]*){1,2}$/;
var rule2 = /^[^0-9]*([0-9][^0-9]*){3,}$/;

if (rule1.test(str))
{
score = 10;
}
else if (rule2.test(str))
{
score = 20;
}
else
{
score = 0;
&nb
sp; }
}

return score;
}

function checkSymbol(str)
{
var score = 0
if (str)
{
var rule1 = /^[0-9a-z]*([^0-9a-z][0-9a-z]*){1}$/i;
var rule2 = /^[0-9a-z]*([^0-9a-z][0-9a-z]*){2,}$/i;

if (rule1.test(str))
{
score = 10;
}
else if (rule2.test(str))
{
score = 25;
}
else
{
score = 0;
}
}

return score;
}

function testLevel(id, str)
{

var level = checkLevel(str);

switch (level)
{
case 6: var status = "非常安全"; break;
case 5: var status = "安全"; break;
case 4: var status = "非常强"; break;
case 3: var status = "强"; break;
case 2: var status = "一般"; break;
case 1: var status = "弱"; break;
case 0: var status = "非常弱"; break;
default: var status = "";
}

var obj = $(id);
obj.innerHTML = status;
}

function checkRepassword(id, id2)
{
var obj = $(id);
var obj2 = $(id2);
var val = false;

if(obj2.value == "" obj.value == ""){
var msg = "请输入密码!";
$(‘pwd_error’).innerHTML = msg;
$(‘pwd_error’).style.display="";
return false;
}

if (obj.value != obj2.value)
{
var msg = "两次输入的密码不一致,请重新输入。";
$(‘pwd_error’).innerHTML = msg;
$(‘pwd_error’).style.display="";
return false;
}
else
{
var msg = "密码符合要求";
$(‘pwd_error’).innerHTML = msg;
$(‘pwd_error’).style.display="";
return true;
}
}
</script>
</head>
<body>
<div>用户名:<input type="text" id="username" name="username" onkeyup="checkUsername(this.value);"/><input type="button" name="smt" value="检测" onclick="checkUsername(username.value);"/><span id="user_error" name="user_error"></span></div>
<div>邮箱:<input type="text" id="email" name="email" onkeyup="checkEmail1(‘email’);" /><input type="button" name="smt" value="检测" onclick="checkEmail1(‘email’);" /><span id="email_error" name="email_error"></span></div>
<div>密码:<input type="password" id="password" name="password" onkeyup="testLevel(‘safe’,this.value);checkRepassword(‘password’,'password2′);" />密码强度:<span id="safe" name="safe"></span>
<div>确定密码:<input type="password" id="password2" name="password2" onkeyup="testLevel(‘safe’,password.value);checkRepassword(‘password’,'password2′)"/><input type="button" name="smt" value="检测" onclick="testLevel(‘safe’,password.value);checkRepassword(‘password’,'password2′)"/><span id="pwd_error" name="pwd_error"></span></div>
<div></div>
</body>
</html>

时间: 2024-08-03 03:46:40

网页设计资源:网页表单验证常用代码例子的相关文章

网页设计技巧:网页表单设计经验分享

文章描述:关于表单每个设计师都必须知道的10件事. 有很多设计糟糕的表单,不管你是否喜欢他们,表单都是必不可少的.Joe Leech(cxpartners负责用户体验的)将介绍其在表单设计上的一些经验. 估计没有什么比表单更让设计师出气了.表单不一定可以让(设计师)表现创意,还是可以?我们可能需要从做基本的层面,重新审视表单,理解表单--表单是用户和软件之间的对话. 忘掉切换啊,点击什么的,表单是我们数字设计师(我想应该是依赖计算机进行设计的设计人员)将面临的最富有的交互.下一次,你要对付一个表

网页表单验证代码的改进

无意中找到了这么一个东西,请建一个空白的html页,输入以下代码:<input onkeyup="value=value.replace(/[^d]/g,'')" >你会发现这是一个只能输入数字的自带正则验证的文本框,我左思右想这个应该是javascript的东西吧?可是找了一些javascript正则的文章好像不能这样用的,但上面的东西在ie6和firefox1.0里都能正确解析.有html或脚本高手谁能告诉我?这个东西好虽好,不过也有缺点,比如最大的毛病是键盘上的方向键

JavaScript 表单验证常用代码

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 被 JavaScript 验证的这些典型的表单数据有: •用户是否已填写表单中的必填项目? •用户输入的邮件地址是否合法? •用户是否已输入合法的日期? •用户是否在数据域 (numeric field) 中输入了文本? 下面是连同 HTML 表单的完整代码:  代码如下 复制代码 <html> <head> <script type="text/javascript&qu

网页表单的javascript集成验证方法举例

javascript|网页   作为一名Web设计人员.一名Coder,你是否已经厌倦了网页设计中的表单验证问题?不厌其烦的拷贝 if(x) { alert('wrong');} ,还是使用一个难以尽和我意的IDE ?好吧,让我来告诉你一种比较lazy的写法,你也许就不会对表单验证那么头大了--    原理:           表单验证无非是要对要收集每一条信息进行验证,也就是要写一个名为       frmValid的javascript函数,在其中执行如下操作:             .

WEBJX收集30个优秀的网页表单制作实例

这里是30个相比风格更加明显,更注重"外貌"的包括评论表单在内的一些优秀的表单应用设计,任何人都希望可以在使用产品的同时能获得愉悦的感受,因此,一个提供易用漂亮的交互方式的Web表单可以吸引更多用户的响应,在愉悦使用的同时留下更直观的视觉印象. 相关文章: 网页设计师参考:网页登录表单设计实例 网页交互设计参考:漂亮的网页登陆表单设计实例 CSS网页设计实例:15个用CSS设计的网页表单实例 1. Synch Media 2. Ft designer 3. Glass house 4.

网页设计参考:寻找设计网页表单的灵感

网页制作Webjx文章简介:一组网页表单页面设计欣赏. 网页表单看似是网站中最常用的页面,内容大多也不会有啥变化,但这样看似简单的表单设计起来并不容易,原因就在于太简单了,所以在一些新手设计时会感觉不知从何开始.其实对于网页设计老手来说,表单设计也有自己的规律,最常用的一种方式就是根据网站整体风格进行设计. 而一些本身就很干净的网页来说,设计起来就需要花些功夫了.本文推荐的几个表单页面包含了复杂与干净的不同网站风格.可以从中寻找设计网页表单的灵感.

网页设计:WEBJX收集优秀的网页表单设计例子

文章描述:30个非常优秀的网页表单设计例子. 网页表单作为访问者与网站所有者主要的沟通途径,确保网页表单比较容易理解和使用起来比较直观成为网页设计的重要目标之一.每个网站都会有适合自己风格的表单,新颖的网页表单设计能吸引用户的注意力,让更多的用户填写反馈信息.在本文中将展示国外一些非常优秀的网页表单设计例子,以供欣赏借鉴. RxBalance Awesome Brian Handley Gowalla Form Spring Buffalo [1] [2] [3] [4] [5]  下一页

网页表单输入框设计:精心简化表单输入框

文章描述:简化输入 - 让网页表单更亲切. 大部分人不喜欢填表单,因为人们来到网站,主要目的不是填表,而是浏览或者购买.精心设计的表单,使输入变得流畅让人心情愉悦,而糟糕的设计让人扶墙吐血.那怎样才是优秀的表单呢?页面的布局.逻辑组织.视觉样式等都是值得关注的细节,其中简化输入是最近常被提及的,在这里我分享下自己工作中的心得- 1. 更高大的输入框 增加输入框高度,加粗字体,可以让网页上的输入框看起来更容易填写和阅读.随着电脑显示器尺寸变大,这样的输入框也显得更大气. 2. 添加选取器. 与其让

测试网页表单的交互设计

作为网页表单交互设计,有时候网页设计师本身要进行一些极端的测试,这就包括填写和思考一些普通用户很难想去做的一些动作.比如在价格输入框中填写英文字母,什么都不输入的时候按提交按钮等等. 一般作为测试者,我们都要尽可能的把一切可能发生的用户行为考虑到,即便这种可能性出现的概率很低. 以下我们来具体分析啊下网页表单的交互设计中的极限测试以及对淘宝等网站进行观察,看看这些大网站对于表单交互测试做到了什么程度! 如图: 1. 你会在search bar什么都不输入的情况下就按search button吗?