一个表单验证例子

最新推荐文章于 2021-06-23 09:15:04 发布

weixin_34088838

最新推荐文章于 2021-06-23 09:15:04 发布

阅读量81

点赞数

文章标签： javascript ui ViewUI

原文链接：https://segmentfault.com/a/1190000011939273

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="test/react.js"></script>
    <script src="test/react-dom.js"></script>
    <script src="test/babel.js"></script>
</head>

<body>

    <div>这个默认会被清掉</div>
    <div id='example'></div>
    <pre>
      
    </pre>

    <script type='text/babel'>
    var container = document.getElementById("example")
    var div = container
    var styles = {}

    class Envvar extends React.Component {
        constructor(a){
          super(a)
          this.nodesToValidate = []
          this.state = {
            data:this.props.data
          }
        }
        additem() {
           let data = this.state.data
           data.push({})
           this.setState({
              data
            })
          
        }
        subtractitem(i){
          //删除数组的某一位
           let data = this.state.data

           data.splice(i,1)
           this.setState({
              data
            })
          
        }
        onSubmit(event){//验证列队中所有的元素, onSubmit事件必须放在form元素上
           var elems = this.nodesToValidate
           if(elems.length === 0){
               event.preventDefault() 
               alert("没有输入任何数据")
               return
           }
           for(var i =0 ,n = elems.length; i < n; i++){
               if(this.validate(elems[i]) === false){//如果有一个不通过
                   event.preventDefault() //阻止默认行为，不提交
                   break
               }
           }
        }
        onChange(i, props, event ){
            var data = this.state.data
            var target = event.target;
            data[i][props] = target.value //更新data
            this.setState({ //更新UI
                data: data
            })
            var index = this.nodesToValidate.indexOf(target)
            if(index === -1){ //决定是否放进列队
                this.nodesToValidate.push(target)
            }
            return this.validate(target) //验证
        }
        
        validate(target){//验证当个元素
           var regexp = target.regexp //ref方法里面加你喜欢的正则
            if(!regexp){ //没有正则当作成功
               return true
            }
            if(!regexp.test(target.value)){
                target.style.color = "red"//加红
                target.scrollIntoView()  //滚动
                return false //失败
            }else{
                target.style.color = "black"
                return true  //成功
            }
        }
        render() {
          let data = this.state.data;
          return (
          <form className={styles.Envvar} onSubmit={this.onSubmit.bind(this)}>
          <label>环境变量</label>
          <div>
          { data.map((item,i)=>{
          if(item){     
           return (<div className={styles.Envvarconf} key={i}>
               <input type="text" name="key"   
                  placeholder="key" 
                  value={this.state.data[i]["key"]||''}
                  ref={(dom)=>{ if(dom){ dom.regexp = /^[a-z]+$/i }  }} 
                  onChange={this.onChange.bind(this, i, "key" )} />
              <input type="text" name="value" 
                 placeholder="value"  
                 value={this.state.data[i]["value"]||''} 
                 onChange={this.onChange.bind(this, i, "value" )} />
             { i== 0 ?  <span onClick={()=>this.additem()}>+</span> :
                <span onClick={()=>this.subtractitem(i)}>-</span>
             }
           </div>)
           }
          })
            }
              </div>
              <p><button type="submit" >提交</button></p>
          </form>
          )
        }
      }
      Envvar.defaultProps = {
        data:[{key:'',value:''}]
      };
 
 var s = ReactDOM.render(<Envvar />, div, function(){
        console.log("done!")
 });
 
      </script>
</body>

</html>

weixin_34088838

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫