NumberValidator的用法,验证是否为小数和整数

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="NumberValidator_domain_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.controls.Alert;
  11.             import mx.events.ValidationResultEvent;
  12.  
  13.             private function numberValidator_invalid(evt:ValidationResultEvent):void {
  14.                 Alert.show(evt.message);
  15.             }
  16.  
  17.             private function numberValidator_valid(evt:ValidationResultEvent):void {
  18.                 Alert.show(evt.type);
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:NumberValidator id="numberValidator"
  24.             domain="{comboBox.selectedItem}"
  25.             source="{textInput}"
  26.             property="text"
  27.             trigger="{button}"
  28.             triggerEvent="click"
  29.             invalid="numberValidator_invalid(event);"
  30.             valid="numberValidator_valid(event);" />
  31.  
  32.     <mx:ApplicationControlBar dock="true">
  33.         <mx:Form styleName="plain">
  34.             <mx:FormItem label="domain:">
  35.                 <mx:ComboBox id="comboBox"
  36.                         dataProvider="[real,int]" />
  37.             </mx:FormItem>
  38.         </mx:Form>
  39.     </mx:ApplicationControlBar>
  40.  
  41.     <mx:Form defaultButton="{button}">
  42.         <mx:FormItem direction="horizontal">
  43.             <mx:TextInput id="textInput"
  44.                     restrict="0-9.-"
  45.                     maxChars="10" />
  46.             <mx:Button id="button"
  47.                     label="validate" />
  48.         </mx:FormItem>
  49.     </mx:Form>
  50.  
  51. </mx:Application>
下面是同样功能的ActionScript的实现代码:
Download:  main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="NumberValidator_domain_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white"
  7.         initialize="init();">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             import mx.containers.ApplicationControlBar;
  12.             import mx.containers.Form;
  13.             import mx.containers.FormItem;
  14.             import mx.containers.FormItemDirection;
  15.             import mx.controls.Alert;
  16.             import mx.controls.Button;
  17.             import mx.controls.ComboBox;
  18.             import mx.controls.TextInput;
  19.             import mx.events.ValidationResultEvent;
  20.             import mx.validators.NumberValidator;
  21.  
  22.             private var numberValidator:NumberValidator;
  23.             private var comboBox:ComboBox;
  24.             private var textInput:TextInput;
  25.             private var button:Button;
  26.  
  27.             private function init():void {
  28.                 comboBox = new ComboBox();
  29.                 comboBox.dataProvider = ["real", "int"];
  30.                 comboBox.selectedIndex = 0;
  31.                 comboBox.addEventListener(Event.CHANGE, comboBox_change);
  32.  
  33.                 textInput = new TextInput();
  34.                 textInput.restrict = "0-9.-";
  35.                 textInput.maxChars = 10;
  36.  
  37.                 button = new Button();
  38.                 button.label = "validate";
  39.  
  40.                 numberValidator = new NumberValidator();
  41.                 numberValidator.domain = comboBox.selectedItem.toString();
  42.                 numberValidator.source = textInput;
  43.                 numberValidator.property = "text";
  44.                 numberValidator.trigger = button;
  45.                 numberValidator.triggerEvent = MouseEvent.CLICK;
  46.                 numberValidator.addEventListener(ValidationResultEvent.INVALID, numberValidator_invalid);
  47.                 numberValidator.addEventListener(ValidationResultEvent.VALID, numberValidator_valid);
  48.  
  49.                 var formItem1:FormItem = new FormItem();
  50.                 formItem1.label = "domain:";
  51.                 formItem1.addChild(comboBox);
  52.  
  53.                 var form1:Form = new Form();
  54.                 form1.styleName = "plain";
  55.                 form1.addChild(formItem1);
  56.  
  57.                 var appControlBar:ApplicationControlBar;
  58.                 appControlBar = new ApplicationControlBar();
  59.                 appControlBar.dock = true;
  60.                 appControlBar.addChild(form1);
  61.                 addChildAt(appControlBar, 0);
  62.  
  63.                 var formItem2:FormItem = new FormItem();
  64.                 formItem2.direction = FormItemDirection.HORIZONTAL;
  65.                 formItem2.addChild(textInput);
  66.                 formItem2.addChild(button);
  67.  
  68.                 var form2:Form = new Form();
  69.                 form2.defaultButton = button;
  70.                 form2.addChild(formItem2);
  71.                 addChild(form2);
  72.             }
  73.  
  74.             private function comboBox_change(evt:Event):void {
  75.                 numberValidator.domain = comboBox.selectedItem.toString();
  76.             }
  77.  
  78.             private function numberValidator_invalid(evt:ValidationResultEvent):void {
  79.                 Alert.show(evt.message);
  80.             }
  81.  
  82.             private function numberValidator_valid(evt:ValidationResultEvent):void {
  83.                 Alert.show(evt.type);
  84.             }
  85.         ]]>
  86.     </mx:Script>
  87.  
  88. </mx:Application>
在Vue中使用Element UI进行表单规则验证时,可以通过自定义验证规则来验证小数整数。 首先,在Vue组件中引入Element UI和所需的验证规则: ``` import {Form,FormItem,Input,Button} from 'element-ui'; import {validNumber, validInteger} from '@/utils/validate'; export default { components: { 'el-form': Form, 'el-form-item': FormItem, 'el-input': Input, 'el-button': Button }, data() { return { form: { decimal: '', integer: '' }, rules: { decimal: [ { validator: validNumber, trigger: 'blur' } ], integer: [ { validator: validInteger, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { // 表单验证通过,提交表单 // ... } else { // 表单验证失败 return false; } }); } } }; ``` 在上述代码中,`validNumber`和`validInteger`是用于验证小数整数的自定义验证方法,这两个方法可以根据自己的需求进行编写。例如,验证小数的方法可以是: ``` validNumber(rule, value, callback) { if (!value) { return callback(new Error('请输入内容')); } else if (!/^[-+]?([0-9]+(\.[0-9]+)?|\.[0-9]+)$/.test(value)) { return callback(new Error('请输入正确的小数')); } else { callback(); } } ``` 验证整数的方法可以是: ``` validInteger(rule, value, callback) { if (!value) { return callback(new Error('请输入内容')); } else if (!/^[1-9]\d*$/.test(value)) { return callback(new Error('请输入正确的整数')); } else { callback(); } } ``` 以上就是使用Element UI进行表单规则验证时,验证小数整数的方法。在规则中添加相应的验证规则,并且通过自定义验证规则方法来实现对小数整数验证
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值