import React from 'react'
import { useState } from 'react'
import { TextInput, View, StyleSheet, TouchableOpacity,Text, Alert } from 'react-native'
const FormValidation = () =>
{
const [Empty, uptEmpty] = useState({chk:""})
const [valid, uptValid] = useState("")
let rjx = /^[A-za-z]+$/
function check(e)
{
if(!rjx.test(e))
{
uptValid("Enter Only Text")
}else{
uptValid("")
}
}
function EmptyCheck(e)
{ uptEmpty({chk:e})
if(Empty.chk.length<1)
{
alert("Please Fill Field")
}
}
return(
<View>
<TextInput placeholder="Max Lenght" maxLength={7} style={styles.TextInp}/>
<TextInput secureTextEntry={true} placeholder="Numeric Keyb.." keyboardType='numeric' style={styles.TextInp}/>
<TextInput placeholder="Numeric Valid Error" style={styles.TextInp}
onChangeText={(e) => check(e)}
/>
<TextInput placeholder="Empty Value Validation" style={styles.TextInp}
onChangeText={(e) => EmptyCheck(e)}
/>
<Text style={{fontSize:15, marginTop:10, marginLeft:20}}>{valid}</Text>
<TouchableOpacity onPress={()=>EmptyCheck()} activeOpacity={0.8} style={styles.container}>
<Text style={styles.btn}>
Check
</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create
({
container:
{
marginTop:20,
backgroundColor: 'red',
height:50,
width:70,
borderWidth:1,
justifyContent:'center',
alignSelf:'center',
alignItems:'center',
},
btn:
{
color:'white',
fontSize:15,
},
TextInp:
{
borderWidth:1,
borderColor:'black',
marginLeft:20,
marginTop:20,
marginRight:20
}
})
export default FormValidation
Comments