字符表单验证与正则表单验证

1、字符表单验证

html部分

js部分

/*事件驱动函数 click   blur--失去焦点*/var oUsername = document.getElementById("username");var oUsernameSpan = document.getElementById("username_span");oUsername.addEventListener("click",btnClick());function btnClick(){oUsernameSpan.innerHTML = "6~18个字符，可使用字母、数字、下划线，需以字母开头";};oUsername.addEventListener("blur",func);function func(){//1、拿到输入框的内容var oValue = oUsername.value;//2、判断//用户长度是否符合要求if(oValue.length<6 || oValue.length>18){oUsernameSpan.innerHTML = "长度应为6~18个字符";//3、判断首字母是否是字母}else if(!isABC(oValue[0])){oUsernameSpan.innerHTML = "邮件地址必需以英文字母开头";}else{//是否都是数字、字母、下划线组成var isYes = true;//假设符合要求for(var i=0;i<oValue.length;i++){if(!isDEF(oValue[i])){isYes = false;break;}}if(isYes){oUsernameSpan.innerHTML = "恭喜，该邮件地址可注册";}else{oUsernameSpan.innerHTML = "邮件地址需由字母、数字或下划线组成";}}}//判断单个字符是否是字母function isABC(charrStr){if(charrStr>="a" && charrStr<="z" || charrStr>="A" && charrStr<="Z"){return true;}else{return false;}}//判断单个字符是否符合数字字母下划线function isDEF(charrStr){if(charrStr>="a" && charrStr<="z" || charrStr>="A" && charrStr<="Z" || charrStr>=0 && charrStr<=9 || charrStr=="_"){return true;}else{return false;}}

效果

2、正则表单验证

html部分

css部分

#div1 {width:250px;height:250px;border:1px solid black;padding:50px;text-align: center;margin:100px auto;background-color:lightgray;}#div1 input {width:250px;height:30px;font-size:18px;margin-top:20px;}#div1 span {margin-top:5px;font-size:14px;color:gray;}#div1 .testCode {width:70px;height:30px;line-height:30px;background-color: gray;color:white;float: left;margin-left:10px;margin-top:6px;}

js部分

 window.onload = function(){var oUsername = document.getElementById("username");var oUsername_span = document.getElementById("username_span");//添加失去焦点事件oUsername.onblur = function(){var oValue = oUsername.value;//1、用户名长度是否符合要求if(oValue.length<6 || oValue.length>18){oUsername_span.innerHTML = "! 长度应为6~18个字符";oUsername_span.style.color = "red";//2、判断首字母是否是字母}else if(!/[a-zA-Z]/.test(oValue[0])){oUsername_span.innerHTML = "! 邮件地址必须以因为字母开头";oUsername_span.style.color = "red";}else if(/\W/.test(oValue)){oUsername_span.innerHTML = "! 邮件地址需由字母、数字或下划线组成";oUsername_span.style.color = "red";}else{oUsername_span.innerHTML = "✔该用户名可注册";oUsername_span.style.color = "green";}}}

效果

字符表单验证与正则表单验证相关推荐

JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
简简单单的正则表单验证练习
正则表单联系第一步,布局再练习之前,我上网查了一些网站的登陆注册页面,一般都是可以兼容手机端和pc端,所以我使用了bootstarp进行布局,正好也再次练习一下bootstarp的使用. boot ...
表单验证与自定义表单验证
/ 验证规则 rules: { // 多个验证用数组单个验证用对象// 验证账号acc: [{ required: true, message: '不能为空', trigger: 'blur' }, ...
php 表单提交及验证 tp,ThinkPHP表单自动提交验证实例教程
ThinkPHP表单自动提交验证实例教程附加规则配合验证规则使用,包括: function 使用函数验证,前面定义的验证规则是一个函数名 callback 使用方法验证,前面定义的验证规则是一个当 ...
『ExtJS』表单（一）常用表单控件及内置验证
几点说明关于ExtJS的表单,我打算分为三个部分来写常用表单控件及内置验证 -- 这里主要是JS代码表单行为与Asp.NET页面的消息回复 -- 这里既有JS代码,与有C#代码,我主要是使用As ...
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
js实现表单及时验证功能用户信息立即验证
问题:表单怎么在输入后立即验证,而不是提交后再验证那么不方便(网上搜到的要么是模棱两可,要么是残缺不全-) 方法:鉴于此,小可,水山奇,将其代码补全,加上小可我个人的理解(注释)在上面,仅供后来者少走 ...
表单验证-通用表单验证大全/通用表单验证函数收集
表单验证-通用表单验证大全/通用表单验证函数收集_Web设计论坛文章来源:IT人才网(http://www.ad0.cn) Javascript表单验证函数大全: 复制内容到剪贴板代码: <s ...
html表单验证案例,HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...

字符表单验证与正则表单验证

1、字符表单验证

2、正则表单验证

字符表单验证与正则表单验证相关推荐

最新文章

热门文章