html表单验证案例,一个表单验证例子

这个默认会被清掉

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 (

环境变量

{ data.map((item,i)=>{

if(item){

return (

placeholder="key"

value={this.state.data[i]["key"]||''}

ref={(dom)=>{ if(dom){ dom.regexp = /^[a-z]+$/i } }}

onChange={this.onChange.bind(this, i, "key" )} />

placeholder="value"

value={this.state.data[i]["value"]||''}

onChange={this.onChange.bind(this, i, "value" )} />

{ i== 0 ? this.additem()}>+ :

this.subtractitem(i)}>-

}

)

}

})

}

提交

)

}

}

Envvar.defaultProps = {

data:[{key:'',value:''}]

};

var s = ReactDOM.render(, div, function(){

console.log("done!")

});