Question

我有这样的事情：

<input type="text" id="number_field" pattern="[-+]?[0-9]*[.,]?[0-9]+" />

如果使用:invalid选择器匹配模式，我可以定位自定义css。

如果未满足所有验证，我想禁用提交XHR的提交按钮。

<button class="AdamBrown" onclick="saveAdamBrown(12)">Save</button>

如何评估Javascript中是否符合该模式？

Answer 1

import React, { Component } from 'react';
import {
  StatusBar,
  View,
  Image,
  StyleSheet,
  TouchableHighlight
} from 'react-native';
import NavigationBar from './navigationBar';

const logo = require('../../imgs/logo5.png');
const clientMenu = require('../../imgs/menu_cliente.png');
const contactMenu = require('../../imgs/menu_contato.png');
const companyMenu = require('../../imgs/menu_empresa.png');
const serviceMenu = require('../../imgs/menu_servico.png');

export default class MainScene extends Component {

  render() {
    console.log('Rendering App!');
    return (
      <View>
        <StatusBar
          backgroundColor='#CCC'
        />
      <NavigationBar />

        <View style={styles.logo}>
          <Image source={logo} />
        </View>

        <View style={styles.menu}>
          <View style={styles.menuGroup}>

            <TouchableHighlight
              underlayColor={'#B9C941'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'client' });
              }}
            >
              <Image style={styles.imgMenu} source={clientMenu} />
            </TouchableHighlight>

            <TouchableHighlight
              underlayColor={'#61BD8C'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'contact' });
              }}
            >
              <Image style={styles.imgMenu} source={contactMenu} />
            </TouchableHighlight>

          </View>

          <View style={styles.menuGroup}>

            <TouchableHighlight
              underlayColor={'#EC7148'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'company' });
              }}
            >
              <Image style={styles.imgMenu} source={companyMenu} />
            </TouchableHighlight>

            <TouchableHighlight
              underlayColor={'#19D1C8'}
              activeOpacity={0.3}
              onPress={() => {
                this.props.navigator.push({ id: 'services' });
              }}
            >
              <Image style={styles.imgMenu} source={serviceMenu} />
            </TouchableHighlight>

          </View>
        </View>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  logo: {
    marginTop: 30,
    alignItems: 'center'
  },
  menu: {
    alignItems: 'center'
  },
  menuGroup: {
    flexDirection: 'row'
  },
  imgMenu: {
    margin: 15
  }
});

checkValidity只会返回true或false。如果您想知道验证失败的原因，可以浏览var input = document.getElementById("number_field") input.checkValidity()对象。

Answer 2

您可以使用HTML5约束验证API（https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation ）。您可以通过检查该元素的validity.patternMismatch值来检查输入模式检查是否有效。请参阅下面的示例代码：

＆＃13;

var numberField = document.getElementById("number_field");
var button = document.getElementsByClassName('AdamBrown')[0];

numberField.addEventListener("input", function (event) {
   button.disabled = numberField.validity.patternMismatch;
});

＆＃13;

<input type="text" id="number_field" pattern="[-+]?[0-9]*[.,]?[0-9]+" />
<button class="AdamBrown" onclick="saveAdamBrown(12)">Save</button>

＆＃13;

如果HTML5输入模式匹配，如何在JS中验证？

2 个答案: