网站全局搜索,青岛网站制作推广平台,合肥网络公司注册,备案网站域名和主机关系效果展示图 使用插件 Formik 负责表单校验、监听表单提交、数据校验错误信息展示 Yup 负责表单校验规则
分析页面
从上述的展示图我们可以看到的主要元素有#xff1a;输入框、单选按钮和按钮。其中生成的密码长度不可能很大也不可能为负数和 0#xff0c;所以我们可以限…效果展示图 使用插件 Formik 负责表单校验、监听表单提交、数据校验错误信息展示 Yup 负责表单校验规则
分析页面
从上述的展示图我们可以看到的主要元素有输入框、单选按钮和按钮。其中生成的密码长度不可能很大也不可能为负数和 0所以我们可以限定密码长度输入框的规则即密码长度最小 4 位最大 16 位所以我们需要进行表单数据校验操作。
因为我们生产的密码包含大小写、数字和特殊字符所以我们需要有辅助的功能函数来帮我们来支撑业务。而密码生产的业务功能函数可以划分这几个部分 生成密码字符串 存放大小写、数字和特殊字符变量并且判断用户是否勾选了对应的生成条件例如是否勾选了是否包含小写字母并且调用创建密码的功能函数 创建密码 通过用户制定的规则生成对应的密码并返回 重置密码状态 重置密码生成器中所有数据的状态
构建页面
根据页面分析和页面展示我们可以首先实现页面的整体搭建和样式名称的定义具体代码如下
export default function PasswordCheck() {return (ScrollView keyboardShouldPersistTapshandledSafeAreaView style{styles.appContainer}View style{styles.formContainer}Text style{styles.title}密码生产器/TextView style{styles.inputWrapper}View style{styles.inputColumn}Text style{styles.heading}密码长度/Text/ViewTextInputstyle{styles.inputStyle}placeholderEx. 8keyboardTypenumeric//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包含小写字母/TextBouncyCheckboxdisableBuiltInStateisChecked{lowerCase}fillColor#29AB87//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包括大写字母/TextBouncyCheckboxdisableBuiltInStateisChecked{upperCase}fillColor#FED85D//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包括数字/TextBouncyCheckboxdisableBuiltInStateisChecked{numbers}onPress{() setNumbers(!numbers)}fillColor#C9A0DC//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包含符号/TextBouncyCheckboxdisableBuiltInStateisChecked{symbols}fillColor#FC80A5//ViewView style{styles.formActions}TouchableOpacity style{styles.primaryBtn}Text style{styles.primaryBtnTxt}生成密码/Text/TouchableOpacityTouchableOpacity style{styles.secondaryBtn}Text style{styles.secondaryBtnTxt}重置/Text/TouchableOpacity/View/View{isPassGenerated ? (View style{[styles.card, styles.cardElevated]}Text style{styles.subTitle}生成结果:/TextText style{styles.description}长按密码进行复制/TextText selectable{true} style{styles.generatedPassword}{password}/Text/View) : null}/SafeAreaView/ScrollView);
}编写样式
定义好框架后我们也有对应的样式名称那么我们就可以逐步实现样式。
const styles StyleSheet.create({appContainer: {flex: 1,},formContainer: {margin: 8,padding: 8,},title: {fontSize: 32,fontWeight: 600,marginBottom: 15,},subTitle: {fontSize: 26,fontWeight: 600,marginBottom: 2,},description: {color: #758283,marginBottom: 8,},heading: {fontSize: 15,},inputWrapper: {marginBottom: 15,alignItems: center,justifyContent: space-between,flexDirection: row,},inputColumn: {flexDirection: column,},inputStyle: {padding: 8,width: 30%,borderWidth: 1,borderRadius: 4,borderColor: #16213e,},errorText: {fontSize: 12,color: #ff0d10,},formActions: {flexDirection: row,justifyContent: center,},primaryBtn: {width: 120,padding: 10,borderRadius: 8,marginHorizontal: 8,backgroundColor: #5DA3FA,},primaryBtnTxt: {color: #fff,textAlign: center,fontWeight: 700,},secondaryBtn: {width: 120,padding: 10,borderRadius: 8,marginHorizontal: 8,backgroundColor: #CAD5E2,},secondaryBtnTxt: {textAlign: center,},card: {padding: 12,borderRadius: 6,marginHorizontal: 12,},cardElevated: {backgroundColor: #ffffff,elevation: 1,shadowOffset: {width: 1,height: 1,},shadowColor: #333,shadowOpacity: 0.2,shadowRadius: 2,},generatedPassword: {fontSize: 22,textAlign: center,marginBottom: 12,color: #000,},
});编写对应功能函数
我们完成了页面的布局接下来就是实现生产密码的功能我这里拆解成生成密码字符串、创建密码和重置密码状态三个功能函数具体的功能函数如下
/*** 生成密码字符串* param passwordLength 密码长度*/const generatePasswordString (passwordLength: number) {let characterList ; // 生产密码的所有相关字符const upperCaseChars ABCDEFGHIJKLMNOPQRSTUVWXYZ;const lowerCaseChars abcdefghijklmnopqrstuvwxyz;const digitChars 0123456789;const specialChars !#$%^*()_;// 根据用户的选择把相关字符拼接到characterList中if (upperCase) {characterList upperCaseChars}if (lowerCase) {characterList lowerCaseChars}if (numbers) {characterList digitChars}if (symbols) {characterList specialChars}const passwordResult createPassword(characterList, passwordLength)setPassword(passwordResult)setIsPassGenerated(true)}/*** 根据密码总字符串和密码长度生产随机字符串** param characters 生产密码的所有相关字符* param passwordLength 密码长度* returns 生成的随机密码*/const createPassword (characters: string, passwordLength: number) {let result for (let i 0; i passwordLength; i) {const characterIndex Math.round(Math.random() * characters.length)result characters.charAt(characterIndex)}return result}/*** 密码重置*/const resetPasswordState () {setPassword()setIsPassGenerated(false)setLowerCase(true)setUpperCase(false)setNumbers(false)setSymbols(false)}表单校验
在简单介绍 React Native 整合 Formik 实现表单校验中我只是简单介绍了Formik的常用的几个属性而这次我们要使用如下几个属性
属性类型说明touched{ [field: string]: boolean }判断表单字符是否已经访问或者修改过isValidboolean如果没有错误即错误对象为空则返回 true否则返回 falsehandleChange(e: React.ChangeEvent) void主键更新 values[key]对应的值其中 key 是事件发出输入的名称属性。如果 name 属性不存在handleChange 将查找输入的 id 属性
具体的代码如下
FormikinitialValues{{ passwordLength: }}validationSchema{PasswordSchema}onSubmit{(values) {generatePasswordString(values.passwordLength);}}
{({values,errors,touched,isValid,handleChange,handleSubmit,handleReset,}) (View style{styles.inputWrapper}View style{styles.inputColumn}Text style{styles.heading}/Text{touched.passwordLength errors.passwordLength (Text style{styles.errorText}{errors.passwordLength}/Text)}/ViewTextInputstyle{styles.inputStyle}value{values.passwordLength}onChangeText{handleChange(passwordLength)}placeholder例如8keyboardTypenumeric//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包含小写字母/TextBouncyCheckboxdisableBuiltInStateisChecked{lowerCase}onPress{() setLowerCase(!lowerCase)}fillColor#29AB87//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包括大写字母/TextBouncyCheckboxdisableBuiltInStateisChecked{upperCase}onPress{() setUpperCase(!upperCase)}fillColor#FED85D//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包括数字/TextBouncyCheckboxdisableBuiltInStateisChecked{numbers}onPress{() setNumbers(!numbers)}fillColor#C9A0DC//ViewView style{styles.inputWrapper}Text style{styles.heading}是否包含符号/TextBouncyCheckboxdisableBuiltInStateisChecked{symbols}onPress{() setSymbols(!symbols)}fillColor#FC80A5//ViewView style{styles.formActions}TouchableOpacitydisabled{!isValid}style{styles.primaryBtn}onPress{() handleSubmit()}Text style{styles.primaryBtnTxt}生成密码/Text/TouchableOpacityTouchableOpacitystyle{styles.secondaryBtn}onPress{() {handleReset();resetPasswordState();}}Text style{styles.secondaryBtnTxt}重置/Text/TouchableOpacity/View/)}
/Formik完整代码下载
完整代码下载
