Skip to content

Releases: jaywcjlove/validator.js

v2.0.0

27 Oct 04:32
@github-actions github-actions
v2.0.0
ce6ff9f
Compare
Choose a tag to compare
v2.0.0

v2.0.0-alpha.2...v2.0.0

⚠️ The v1 version document preview is here.
⚠️ 1.0 cannot be upgraded to 2.0+

const validator = useRef(new Validator({
  validate: (value, values, field) => {
    if (field === 'password' && !value) {
      return 'Required!';
    }
  }
}));
validator.message('email', data.email, {
  validate: (val) => !/^[A-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(val) ? `The ${val} must be a valid email address.` : ''
})

Used in the React App

Open in CodeSandbox

Example 
import { useRef, useState } from 'react';
import Validator from 'validator.tool';

function Demo() {
  const validator = useRef(new Validator({
    validate: (value, values, field) => {
      if (field === 'password' && !value) {
        return 'Required!';
      }
    }
  }));
  const [data, setData] = useState({
    email: 'kennyiseeyou@gmail.com'
  });
  const [upState, forceUpdate] = useState(0);

  useEffect(() => {
    if (!validator.current.initValues) {
      validator.current.initValues = data;
    }
  }, []);

  function handleSubmit(evn) {
    evn && evn.preventDefault();
    validator.current.showMessages();
    forceUpdate(upState + 1);
  }

  function handleReset() {
    validator.current.hideMessages();
    const v = validator.current.reset();
    setData({ ...v });
  }

  function handleChange(env) {
    const target = env.target;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    setData({ ...data, [name]: value });
  }

  return (
    <form onSubmit={handleSubmit} onReset={handleReset} onChange={handleChange}>
      <div>
        <label htmlFor="email">EMail:</label>
        <input type="email" name="email" defaultValue={data.email} />
        <p>
          {validator.current.message('email', data.email, {
            validate: (val) => !/^[A-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(val) ? `The ${val} must be a valid email address.` : ''
          })}
        </p>
      </div>
      <div>
        <label htmlFor="password">Password:</label>
        <input type="password" name="password" />
        <p>
          {validator.current.message('password', data.password)}
        </p>
      </div>
      <div>
        <label htmlFor="repassword">Confirm Password:</label>
        <input type="repassword" name="repassword" />
        <p>
          {validator.current.message('repassword', data.repassword)}
        </p>
      </div>
      <div>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </div>
    </form>
  );
}

Used in the React Native App

You need to wrap validator with <Text> Element.

Example 
import React, { useRef } from 'react';
import { Text, View, Button } from 'react-native';
import Validator from 'validator.tool';

const WelcomeScreen = () => {
  const [text, onChangeText] = React.useState('Useless Text');
  const [, forceUpdate] = React.useState();
  const validator = useRef(new Validator({
    validate: (value, values, field) => {
      if (field === 'username' && value.length > 3) {
        return 'Required!';
      }
    },
  }));

  return (
    <View>
      <TextInput onChangeText={onChangeText} value={text} />
      <Text>
        {validator.current.message('username', text)}
      </Text>
      <Button
        onPress={() => {
          validator.current.showMessages();
          forceUpdate(1);
        }}
        title="Submit"
        color="#841584"
      />
    </View>
  );
};

Used in the browser client

Refer to the validator.min.js file in the application, manually download and link validator.min.js in HTML.

<script type="text/javascript" src="dist/validator.min.js"></script>

It can also be downloaded via UNPKG:

Open in CodeSandbox

Example 
<form id="form">
  <div>
    <label for="email">EMail:</label>
    <input type="email" name="email" placeholder="" />
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" name="password" />
  </div>
  <div>
    <label for="repassword">Confirm Password:</label>
    <input type="repassword" name="repassword" />
  </div>
  <div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>
<script type="text/javascript" src="https://unpkg.com/validator.tool/dist/validator.min.js"></script>
<script type="text/javascript">
var validator = new Validator({
  form: document.getElementById('form'),
  rules: {
    email: {
      validate: (val) => val ? '' : 'Required!',
    },
    password: {
      // validate: (val) => val < 5 || val > 15 ? '字数大于5，小于15' : ''
    },
    repassword: {
      validate: (val) => !val ? 'Required!' : '',
    },
  }
});

validator.form.onsubmit = (evn) => {
  evn.preventDefault();
  const values = validator.getValues();
  console.log(values);
}

validator.form.onreset = (evn) => {
  const data = validator.reset();
  console.log(data);
}
</script>

Contributors

jaywcjlove
Assets 2

v2.0.0-alpha.2

26 Oct 18:28
@github-actions github-actions
v2.0.0-alpha.2
a164cd8
Compare
Choose a tag to compare
v2.0.0-alpha.2

v2.0.0-alpha.1...v2.0.0-alpha.2

Contributors

jaywcjlove and renovate-bot
Assets 2

v2.0.0-alpha.1

26 Oct 18:03
@github-actions github-actions
v2.0.0-alpha.1
ba75ddd
Compare
Choose a tag to compare
v2.0.0-alpha.1

v2.0.0-alpha.0...v2.0.0-alpha.1

Contributors

jaywcjlove and renovate-bot
Assets 2

v2.0.0-alpha.0

26 Oct 16:42
@github-actions github-actions
v2.0.0-alpha.0
8a4863b
Compare
Choose a tag to compare
v2.0.0-alpha.0

v1.0.9...v2.0.0-alpha.0

Contributors

jaywcjlove, kiznick, and 2 other contributors
Assets 2

v1.0.9

09 Feb 10:26
@jaywcjlove jaywcjlove
v1.0.9
c76d71c
Compare
Choose a tag to compare
v1.0.9
  • 560f6c3 - Only detect the input is not empty and the rules has required will be checked : @aniude
Assets 2

v1.0.8

14 Sep 06:10
@jaywcjlove jaywcjlove
v1.0.8
028626f
Compare
Choose a tag to compare
v1.0.8
Assets 2

v1.0.6

12 Sep 11:05
@jaywcjlove jaywcjlove
v1.0.6
9a09f2c
Compare
Choose a tag to compare
v1.0.6
Assets 2

v1.0.5

21 Feb 05:19
@jaywcjlove jaywcjlove
v1.0.5
db3edcb
Compare
Choose a tag to compare
v1.0.5

f9e1c68 : #6 手机号验证增加173号段

Assets 2