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
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter