我的Web学习之路2——密码框的提示与表单验证
来源:互联网 发布:淘宝玻璃茶具套装 编辑:程序博客网 时间:2024/05/29 11:55
<span><label>密码</label><label id="pwdTip"></label></span>
<span><input name="userPwd" type="text" class="textBox" value="您的密码"></span>
</div>
css代码:
.tipNormalStyle {
color: orange;
}
.tipWrongStyle {
color: red;
}
.tipRightStyle {
color: green;
}
js代码:
function judge($toBeJudged){
var flag = true; //用于判断
var name = $toBeJudged.attr("name"); //attr获取选中元素的属性值
var value = $toBeJudged.val(); //获取选中元素的内容
var $pwdTip = $("#pwdTip");
var standard = /^[0-9a-zA-Z_]{8,16}$/;
if(value == "您的密码"){
$pwdTip.removeClass().addClass("tipWrongStyle").html(" 密码不能为空,请输入密码");
flag = false;
}else if(standard.test(value) == false){
$pwdTip.removeClass().addClass("tipWrongStyle").html(" 密码格式不正确,请检查后重新输入");
flag = false;
}else{
$pwdTip.removeClass().addClass("tipRightStyle").html(" 密码输入正确");
}
return flag;
}
$("[name=userPwd]").bind({
focus:function(){
//点击时变成密码输入框,以便未点击时在框中显示"您的密码"的提示
this.type="password";
$("#pwdTip").removeClass().addClass("tipNormalStyle").html(" 请输入8-16位密码,仅支持字母、数字以及下划线");
},
blur:function(){
if(this.value == "您的密码"){
this.type="text";
}
judge($(this));
}
});
下面是实现出来的效果: Tips:图片中在CSS里有进一步美化,为了节省篇幅省略了文本框和小图标的美化,但基本功能已经能够实现
- 我的Web学习之路2——密码框的提示与表单验证
- 我的Laravel学习之路之表单验证 validation
- 我的表单验证
- 我的框架:表单验证
- 我的Web学习之路4——Javascript、Jquery中数组的定义与操作
- 蜗牛—JavaScript学习之表单验证
- SpringMVC注记方式验证学习笔记——验证出错提示信息文本与验证注记的关联
- 表单增强与验证——更改输入框类型(显示密码)
- web——表单验证
- PHP学习之--表单与验证
- 登录提示框与密码提示框,生成验证码
- web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)
- JavaScript表单——验证密码强度的正则表达式及其应用
- JavaScript表单——验证密码强度
- 实现带样式的表单验证:用户名、密码验证
- 我的Web学习之路3——去掉点击超链接时的虚线边框
- 最近我眼中的表单验证
- 一种WEB表单验证的简单方法
- 采用CXF框架开发HelloWorld WebService客户端
- 类的扩展
- hdu1009FatMouse's Trade
- C#学习之多线程开发技术(一)
- $在php里
- 我的Web学习之路2——密码框的提示与表单验证
- swapPairs
- TrueType和Bitmap字体的区别
- 第六周--后缀表达式
- Guava 学习笔记 02
- Strings and Regular Expressions(homework for 02)
- BestCoder Round #58
- C++中引用(&)的用法和应用实例
- 文章标题