async-validator-uniapp - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

package.json

 {
   "name": "async-validator-uniapp",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "a simgle tool for valid form",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

README.md

@@ -1,2 +0,2 @@
-## async-validator-uniapp
+## <a name="async-validator-uniapp">async-validator-uniapp</a>
 * 一个简单的表单校验组件
@@ -6,3 +6,6 @@ * 它类似于jquery validate
 * 没错，它依赖了async-validator，同时提供了和elementui表单校验几乎一样的接口
+* 支持自定义校验规则
+* 暂时不支持动态新增或减少需要校验的表单元素
 
+
 ## Usage
@@ -20,11 +23,29 @@ ###安装
 ##### 提示
->  <font face="黑体" color="red" >[WARNING]</font> uniapp模块停止更新，如果需要拷贝到项目，请npm下载后拷贝使用，入口文件是index.js
+>  <font face="黑体" color="red" >[WARNING]</font> 1.0.3之后，可能会停止插件市场的更新，如果需要拷贝到项目，请npm下载后拷贝使用，入口文件是index.js
 
 ### 全局导入
+在main.js里面注册，目前uniapp全局组件不支持xPlus.intall(Vue)的这种方式
 
 ```html
-    import xPlus from "async-validator-uniapp"
-	xPlus.install(Vue);
+
+    import xform from './components/async-validator-uniapp/src/xForm.vue'
+    import xinput from './components/async-validator-uniapp/src/xInput.vue'
+    import xcheckboxGroup from './components/async-validator-uniapp/src/xCheckboxGroup.vue'
+    import x from './components/async-validator-uniapp/src/xCheckbox.vue'
+    import xradioGroup from './components/async-validator-uniapp/src/xRadioGroup.vue'
+    import xradio from './components/async-validator-uniapp/src/xRadio.vue'
+    import xpicker from './components/async-validator-uniapp/src/xPicker.vue'
+    import xtextarea from './components/async-validator-uniapp/src/xTextarea.vue'
+    
+    Vue.component("x-form", xform)
+    Vue.component("x-input", xinput)
+    Vue.component("x-checkbox-group", xcheckboxGroup)
+    Vue.component("x-checkbox", xcheckbox)
+    Vue.component("x-radio-group", xradioGroup)
+    Vue.component("x-radio", xradio)
+    Vue.component("x-picker",xpicker)
+    Vue.component("x-textarea", xtextarea)
 ```
 ### 局部引入
+在需要的页面里面导入,并且注册
 ```javascript
@@ -39,30 +60,30 @@ import {xForm} from "async-validator-uniapp";
  import {xTextarea} from "async-validator-uniapp";
+ export default {
+	 components:{xForm,xInput,xCheckboxGroup,xCheckbox,xRadioGroup,xRadio,xPicker,xTextarea}
+ }
 ```
-### API
- #### xPlus.install
+## API
+### xPlus.install <font face="黑体" color="red" >[WARNING]暂时不支持，请不要使用xPlus.install</font>
 ##### 第一个参数是Vue
 ##### 第二个参数是你要给你的标签添加的前缀，如果不使用默认是"x"
-
-#### validate  验证整个form是否通过校验
+### validate  验证整个form是否通过校验
 this.$refs['form的ref'].validate
-
-
-#### validateField校验当个表单
+### validateField校验单个表单
 this.$refs['form的ref'].validateField('对应表单的prop')
-#### resetFields 清空某个表单或者整个from
+### resetFields 清空某个表单或者整个from
 this.$refs['form的ref'].resetFields('对应表单的prop,如果不填就是清空整个form')
 
-### 标签
-#####  x-form
-#####  x-input
-#####  x-checkbox-group
-#####  x-radio-group
-#####  x-picker
-#####  x-radio
-#####  x-checkbox
-#####  x-textarea
+## 标签目录
+#####  <a href="#x-form">x-form</a>
+#####  <a href="#x-input">x-input</a>
+#####  <a href="#x-checkbox-group">x-checkbox-group</a>
+#####  <a href="#x-radio-group"> x-radio-group</a>
+#####  <a href="#x-picker">x-picker</a>
+#####  <a href="#x-radio">x-radio</a>
+#####  <a href="#x-checkbox">x-checkbox</a>
+#####  <a href="#x-textarea">x-textarea</a>
 
-### 标签属性(没有特殊说明的和uniapp保存一致)
+## 标签属性(没有特殊说明的和uniapp保存一致)
  
-#### x-form
+#### <a name="x-form">x-form</a>
 
@@ -75,25 +96,27 @@ 属性名|类型|默认值|说明
 
-#### x-input
+#### <a name="x-input">x-input</a>
 属性名|类型|默认值|说明
 ---|:--:|:--:|---:
 type|string|--|默认text,类型请参考uniapp文档
-value|string|Number|表单显示值
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+value|string|--|表单显示值
+disabled|Boolean|false|禁用
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
 
-#### x-checkbox-group
+####  <a name="x-checkbox-group">x-checkbox-group</a>
 属性名|类型|默认值|说明
 ---|:--:|:--:|---:
-value|string|Number|表单显示值
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+value|string|--|表单显示值
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
 
-#### x-radio-group
+#### <a name="x-radio-group">x-radio-group</a>
 属性名|类型|默认值|说明
 ---|:--:|:--:|---:
-value|string|Number|表单显示值
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+value|string|--|表单显示值
+label|string|--|提示文字
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
 
-#### x-checkbox
+#### <a name="x-checkbox">x-checkbox</a>
 属性名|类型|默认值|说明
@@ -104,5 +127,5 @@ ---|:--:|:--:|---:
 disabled|Boolean|false|禁用
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
-#### x-radio
+####  <a name="x-radio">x-radio</a>
 属性名|类型|默认值|说明
@@ -113,6 +136,6 @@ ---|:--:|:--:|---:
 disabled|Boolean|false|禁用
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
 
-#### x-textarea
+####  <a name="x-textarea">x-textarea</a>
 属性名|类型|默认值|说明
@@ -123,16 +146,23 @@ ---|:--:|:--:|---:
 disabled|Boolean|false|禁用
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
 
-#### x-picker
+#### <a name="x-picker">x-picker</a>
 属性名|类型|默认值|说明
 ---|:--:|:--:|---:
-value|string|Number|表单显示值
+value|string|--|表单显示值
 disabled|Boolean|false|禁用
 placeholder|String|"请选择"|占位符
-prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值得key保持一致
+prop|string|--|对应的校验规则，强烈推荐和该表单的绑定值的key保持一致
 @input|Function|--|同步数据到当前页面
+@cancel|Function|--|取消事件
 
 ## 代码块
-### 基础校验
+#####  <a href="#基础校验">基础校验</a>
+#####  <a href="#checkbox&&radio">checkbox&&radio</a>
+#####  <a href="#picker">picker</a>
+#####   <a href="#自定义规则">自定义规则</a>
+#####   <a href="#动态增减表单项">动态增减表单项</a>
+   
+### <a name="基础校验">基础校验</a>
 ```html
@@ -295,3 +325,3 @@ <template>
 
-### checkbox&&radio
+###  <a name="checkbox&&radio">checkbox&&radio</a>
 ```html
@@ -437,3 +467,3 @@ <template>
 
-###picker
+### <a name="picker">picker</a>
 ```html
@@ -528,3 +558,3 @@ <template>
 
-### 自定义规则
+### <a name="自定义规则">自定义规则</a>
 
@@ -628,7 +658,103 @@ ```html
 ```
+###  <a name="动态增减表单项">动态增减表单项</a>
 
+```html
+ <template>
+	<view>
+		<view class="uni-padding-wrap uni-common-mt">
+			<x-form :rules="rules" :model="form" ref="ruleForm" @submit="customerSubmit">
+				<view class="uni-form-item uni-column">
+					<view class="title">普通文字(改变的时候检测){{form.input}}</view>
+					<x-input type="text" :value="form.input" @input="changeInput('input',$event)" prop="input"></x-input>
+				</view>
+                <view class="uni-form-item uni-column" v-for="item in inputArray" :key="item.key" style="position:relative;">
+					<x-input type="text" :value="form[item.key]" @input="changeInput(item.key,$event)" :prop="item.key" placeholder="我系追加的，辣"></x-input>
+                      <button @tap="dele(item.key)" size="mini" type="warn" style="position:absolute;right:5px;top:15px;z-index:20;">删</button>
+				</view>
+                <view>
+                    <button @tap="add">新增一个必填表单</button>
+                </view>
+				<view class="uni-btn-v">
+					<button formType="submit">使用Submit</button>
+					<button @tap="customerSubmit">不使用Submit提交</button>
+					<button type="default" formType="reset">Reset</button>
+				</view>
+			</x-form>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+        name:"decreateInput",
+		data() {
+			return {
+                modelShow:false,
+                keyx:0,
+                inputArray:[
 
+                ],
+				form: {
+					input: "zz00",
+					input2: "zzyy",
+					passwordx: "123456",
+					number: "",
+					digit: "",
+					idcard: "",
+					textarea: "",
+				},
+				rules: {
+					input: [{
+						required: true,
+						message: '请输入txt',
+						trigger: 'change'
+					}]
+				}
+			}
+		},
+		methods: {
+			add() {
+                    this.keyx+=1;
+                    let k="x"+ this.keyx;
+                    this.inputArray.push({
+                        key:k,
+                        value:""
+                    });
+                    this.form[k]="";
+                    this.rules[k]=[{
+						required: true,
+						message: `请输入${"x"+ this.keyx}`,
+						trigger: 'change'
+					}];
+            },
+            dele(key){
+                this.inputArray=this.inputArray.filter((item)=>item.key!=key);
+                delete this.form[key];
+                delete this.rules[key];
+            },
+			customerSubmit() {
+				this.$refs['ruleForm'].validate((valid) => {
+					if (valid) {
+						uni.showToast({
+                            title: '提交成功',
+                            duration: 2000
+                        });
+					} else {
+						console.log('error submit!!');
+					}
+				});
+			},
+			validInput(k) {
+				this.$refs['ruleForm'].validateField(k)
 
+			},
+			changeInput(k,val){
+				this.form[k]=val;
+			}
+		}
+	}
+</script>
+```
 
 
+### <a href="#async-validator-uniapp"><font face="黑体" color="red" size="5" >回到顶部</font></a>
 
@@ -665,1 +791,4 @@
 
+
+
+

src/index.js

@@ -1,24 +0,23 @@
-import form from './x-form.vue'
-import input from './x-input.vue'
-import checkboxGroup from './x-checkbox-group.vue'
-import checkbox from './x-checkbox.vue'
-import radioGroup from './x-radio-group.vue'
-import radio from './x-radio.vue'
-import picker from './x-picker.vue'
-import textarea from './x-textarea.vue'
+import xxform from './xForm.vue'
+import xxinput from './xInput.vue'
+import checkboxGroup from './xCheckboxGroup.vue'
+import checkbox from './xCheckbox.vue'
+import radioGroup from './xRadioGroup.vue'
+import radio from './xRadio.vue'
+import picker from './xPicker.vue'
+import textarea from './xTextarea.vue'
 const xPlus = {};
 xPlus.install = function(Vue, pr) {
-	let p = String(pr).length && /^[a-z]&/.test(pr) ? pr : 'x';
-	Vue.component(`${p}-form`, form)
-	Vue.component(`${p}-input`, input)
-	Vue.component(`${p}-checkbox-group`, checkboxGroup)
-	Vue.component(`${p}-checkbox`, checkbox)
-	Vue.component(`${p}-radio-group`, radioGroup)
-	Vue.component(`${p}-radio`, radio)
-	Vue.component(`${p}-picker`, picker)
-	Vue.component(`${p}-textarea`, textarea)
+	Vue.component("bl-form", xxform)
+	Vue.component("bl-input", xxinput)
+	Vue.component("bl-checkbox-group", checkboxGroup)
+	Vue.component("bl-checkbox", checkbox)
+	Vue.component("bl-radio-group", radioGroup)
+	Vue.component("bl-radio", radio)
+	Vue.component("bl-picker", picker)
+	Vue.component("bl-textarea", textarea)
 }
-export const xForm=form;
-export const xInput=input;
-export const xFheckboxGroup=checkboxGroup;
+export const xForm=xxform;
+export const xInput=xxinput;
+export const xCheckboxGroup=checkboxGroup;
 export const xCheckbox=checkbox;
@@ -28,3 +27,4 @@ export const xRadioGroup=radioGroup;
 export const xPicker=picker;		
-export const xTextarea=textarea;			
+export const xTextarea=textarea;	
+
 export default xPlus;

src/mixins.js

@@ -11,2 +11,3 @@ import Event from "./watch.js"
 	created() {
+		//校验
 		Event.$on("valid", (data) => {
@@ -33,2 +34,10 @@ if(data.prop!==this.prop){
 
+		//重置
+		Event.$on("reset", (e) => {
+			this.inputValue="";
+			//不需要通知Form
+			//通知本组件
+			this.$emit("input",this.inputValue)
+		});
+
 	},
@@ -35,0 +44,0 @@ methods: {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Number of lines in readme file

783

increased by19.72%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

39559

decreased by-71.98%

Number of package files

14

decreased by-81.58%

Lines of code

96

decreased by-96.24%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes