• 表单验证:用户注册


    // 判断输入字符的长度
    function getLength(){
    // 得到汉字的长度:x00-xff 单字节
    // [^x00-xff]意思为双字节
    return str.replace(/[^x00-xff]/g,"xx").length;
    }

    function findStr(str, n){
    var tmp = 0;
    for (var i = 0; i < str.length; i++){
    if(str.charAt(i)==n){
    tmp++;
    }
    }
    return tmp;
    }


    // 获取元素
    window.onload=function(){
    var ainput=document.getElementsByTagName("input");
    var oName=ainput[0];
    var pwd=ainput[1];
    var pwd2=ainput[2];
    var aP=document.get.getElementsByTagName('p');
    var name_msg=aP[0];
    var pwd_msg=aP[1];
    var pwd2_msg=aP[2];
    var count=document.getElementsById('count');
    var aEm=document.getElementsByTagName("em");
    var name_length=0;
    // var str="adaewe";
    // var re=/(a[d-g])(2)/}//匹配a字符,匹配d到g之间的字符,然后分成一组,并且这一组要出现两次,不区分大小写
    // alert(re.test(str));//test函数验证匹配是否正确,返回一个布尔值

    // 用户名输入框验证
    // 1.数字,字母(不分大小写),汉字、下划线
    // 2.5-25个字符,推荐使用中文会员名
    //1用w表示,2所有的汉字用u4e00-u9fa5的区间表示
    var re=/[^wu4e00-u9fa5]/g;//加上^匹配中括号中的所有的非法字符
    // 交互行为(出现非法的字符后给用户提示信息)
    //用户名:添加三个动作
    //1:得到焦点时触发一个函数
    oName.onfocus=function(){
    // 当用户的输入框得到焦点的时候,让右侧的信息提示显示出来
    name_msg.style.display="block";
    // 把提示内容显示出来,i标签为图标
    name_msg.innerHTML='<i class="ati"></i>5-25个字符,一个汉字为两个字符,推荐使用中文明'

    }
    // 当键盘抬起的时候触发一个函数(字符输入完成了)
    oName.onkeyup=function(){
    // 显示字符
    count.style.visiblity="visible";
    // 判断输入字符的长度
    name_length=getLength(this.value);
    // 统计字符的长度
    count.innerHTML=name_length+"个字符";
    // 假如没有输入就影藏字符统计的显示
    if (name_length==0) {
    count.style.visiblity="hidden";
    }
    }
    // 当失去焦点的时候在触发一个函数
    oName.onblur=function(){
    // 含有非法字符
    var re=/[^wu4e00-u9fa5]/g;//匹配非法字符
    if (re.test(this.value)) {
    // 如果为真,就有非法字符,显示提示信息
    name_msg.innerHTML='<i class="err"></i>含有非法字符!';
    }

    // 不能为空
    else if (this.value=="") {
    name_msg.innerHTML='<i class="err"></i>不能为空!';
    }

    // 长度超过25个字符
    else if (name_length>25) {
    name_msg.innerHTML='<i class="err"></i>长度不能超过25个字符';
    }
    else if (name_length<6) {
    name_msg.innerHTML='<i class="err"></i>长度不能少于6个字符';
    }
    // 验证通过OK
    else{
    name_msg.innerHTML='<i class="ok"></i>ok!';
    }
    }

    pwd.onfocus=function(){
    pwd_msg.style.display="block";//得到焦点时先显示出提示语
    pwd_msg.innerHTML='<i class="ati"></i>6-16个字符,请使用字母加数字或符号的组合密码,不能单独使用字母、数字或符号!';

    }
    pwd.onkeyup = function(){
    //大于5字符为“中”
    if(this.value.length>5){
    aEm[1].className = "active";
    pwd2.removeAttribute("disabled");
    pwd2_msg.style.display = "inline";
    }else{
    aEm[1].className = "";
    pwd2.setAttribute("disabled");
    pwd2_msg.style.display = "none";
    }

    //大于10字符为“强”
    if(this.value.length>10){
    aEm[2].className = "active";
    }else{
    aEm[2].className = "";
    }
    }

    pwd.onblur = function(){
    var m = findStr(pwd.value, pwd.value[0]);

    var reg_n = /[^d]/g;
    var reg_c = /[^a-zA-Z]/g;

    //不能为空
    if(this.value==""){
    pwd_msg.innerHTML = '<i class="err"></i>不能为空!';
    }
    //不能用相同字符
    else if(m == this.value.length){
    pwd_msg.innerHTML = '<i class="err"></i>不能用相同字符!';
    }
    //长度应为6-16个字符
    else if(this.value.length < 6 || this.value.length > 16){
    pwd_msg.innerHTML = '<i class="err"></i>长度应为6-16个字符!';
    }
    //不能全为数字
    else if(!reg_n.test(this.value)){
    pwd_msg.innerHTML = '<i class="err"></i>不能全为数字!';
    }
    //不能全为字母
    else if(!reg_c.test(this.value)){
    pwd_msg.innerHTML = '<i class="err"></i>不能全为字母!';
    }
    //OK
    else{
    pwd_msg.innerHTML = '<i class="ok"></i>OK!';
    }
    }

    //确认密码

    pwd2.onblur = function(){
    if(this.value != pwd.value){
    pwd2_msg.innerHTML = '<i class="err"></i>两次输入的密码不一致!';
    }else{
    pwd2_msg.innerHTML = '<i class="ok"></i>OK!';
    }
    }
    }

    本js代码的html和CSS地址:http://www.cnblogs.com/xuxiaoxia/p/6440462.html

  • 相关阅读:
    python学习笔记(2)
    数据分析工具pandas
    python学习笔记(1)
    python学习笔记(3)
    python学习笔记(2):科学计算及数据可视化入门
    python学习笔记(1):python基础
    js setTimeout 和 setInterval 区别
    C#根据URL生成签名
    jquery.validate.js客户端验证
    redis学习(一)
  • 原文地址:https://www.cnblogs.com/xuxiaoxia/p/6439941.html
Copyright © 2020-2023  润新知