zoukankan      html  css  js  c++  java
  • 用户名不能为空

    在表单中经常些必填项目,如果用户没有输入则不允许提交表单。例如在注册用户时,必须填写用户名才能提交注册信息。验证用户是否输入时,通常需要先过滤再验证(如果用户输入的都是空格就相当于没有输入)。
    我们通过使用正则表达式匹配空格
    1 var regex = /s+/g;
    调用string的replace方法清除空格
    1 string.replace(regex,'');
    创建一个函数:
    1 function regexEmpty(obj){
    2      obj.value = obj.value.replace(regex,'');
    3 }

    具体代码如下:

    HTML:

    1 < div class= "main">
    2            < input id= "userName" type= "text" placeholder= "请输入用户名" >
    3            < input id= "rule" type= "button" value= "验证">
    4 </ div>

    css:

    1 html,body ,div, input{margin :0; padding:0 ;}
    2             .main{width :400px ;height: auto;padding :0 15px; text-align:center; }
    3             .main input{width :100% ;height: 35px; border:none ;margin-top: 20px; border-radius:5 px;}
    4            input[type ="text"] {text-align: left;padding-left :15px ;box-sizing: border-box;border :1px solid green; }
    5             input[type ="button"] {width: 50%; background:green; }

    javascript:

     1 var userName = document.getElementById('userName' ),
     2                 rule  = document.getElementById( 'rule'),
     3                 deleteEmpty = null,
     4                 regex    = /s+/g;
     5             deleteEmpty = function (obj){
     6                 obj.value = obj.value.replace(regex,'' );
     7                  if(! obj.value){
     8                      alert( '用户名不能为空' );
     9                 } else{
    10                         alert('pass');
    11                 }
    12            }
    13            rule. onclick = function (){
    14                 deleteEmpty(userName);
    15 };

    demo演示地址:点击这里

  • 相关阅读:
    lamp架构之升级php版本
    Linux常用命令大全
    Mysql表连接查询
    PHP练习题三
    PHP练习题二
    php 设计模式
    LAMP环境搭建教程
    Storm入门(四)WordCount示例
    Storm入门(三)HelloWorld示例
    Storm入门(一)原理介绍
  • 原文地址:https://www.cnblogs.com/White-Quality/p/5492439.html
Copyright © 2011-2022 走看看