1. Crie um formulário formulário de duas maneiras, maneiras diferentes para criar um formulário no js de maneiras diferentes
Opção 1: uso geral na forma de busca, você só precisa de lata ligação de dados bidirecional, então você pode usar este método
<template>
<a-form>
<a forma item label = "Nota": label-col = "{intervalo: 5}": envoltório-col = "{intervalo: 12}">
v- <a-input model = "queryParam.note"> </ a-input>
</ a-form-item>
rótulo <a forma item = "marca": label-col = "{intervalo: 5}": envoltório-col = "{intervalo: 12}">
<a-input v-modelo = "queryParam.mark"> </ a-input>
</ a-form-item>
<a-form-artigo: envoltório-col = "{extensão : 12, offset: 5} ">
tipo <a-button =" "html-type = "primário enviar" @ clique = "handleSubmit"> Enviar </ a-button>
</ a-form-item>
</ a -forma>
</ template>
<script>
exportação padrão {
name: 'TestForm' ,
de dados () {
retorno {
queryParam: {
nota: '' ,
marca: ''
}
}
},
métodos: {
handleSubmit () {
console.log ( este .queryParam)
}
}
}
</ script>
Personificação 2: Usar o login ou registro, cenário de aplicação etc., e por isso precisa ser verificado forma, o uso deste método
Se apenas desenho, eu também como escrever código? Como copiar e colar? Como isso funciona?
<Modelo>
<A-form: form = "forma" @ Submeter = "handleSubmit">
rótulo <A-form-item = "Nota": label-COL = "{extensão :. 5}": warpper-COL = "{ período: 12 é} ">
<- ANTD recomendado levar v-decorador para definir item de mesa, método de verificação é recomendado embalagem, a estrutura da página mais claramente ->!
<INPUT a-v-decorador =" [ 'Nota' , ValidateRules.note] "/>
<! - nenhum método de paridade, podem ser escritos diretamente por isso ->
<! - <INPUT V-A-Decorator =" [ 'Nota'] "/> ->
< / a-form-item>
<a-form-item: warpper-COL = "{intervalo: 12 é, compensar :. 5}">
tipo <a-Button = HTML do tipo "primária" = "Enviar"> o Enviar </ button-A>
</ form-A-item>
</ A-form>
</ template>
<script>
exportação padrão {
name: 'TestForm' ,
Os dados () {
o console.log (aa.value)return {
// aqui é criar um formulário com CreateForm, este pode ser passado
formulário: este . form.createForm $ ( este ),
// por trás desse argumento é o item opções de configuração (parâmetros opcionais), por que deve definir com ele, serra descrito mais tarde
// forma: $ form.createForm a este (o presente, {name: 'LoginForm'}),.
ValidateRules: {
Nota: {as regras: [{exigida: a verdade , Mensagem: 'Por favor, sua entrada Note' }]}
}
}
},
Métodos: {
handleSubmit (e) {
const AA = document.getElementById ( 'Nota' )
e.preventDefault ()
este .form.validateFields ((err, valores) => {
se (! err) {
console.log ( 'valores recebidos de forma:' , valores)
}
})
console.log ( este .form. getFieldsValue ())
}
}
}
</ script>
2. Quando utilizar CreateForm () para criar um formulário, passando a razões options.name:
Se você seguir o acima escrito, você define duas formas, chamou os valores de atributos de gênero, então o seu ID é o mesmo, tudo id = "gênero", de acordo com o princípio de que uma página não deve ter o mesmo id . Pode resultar no seguinte:
genderDiv = document.getElementById const ( 'gender' ); // id você chegar aqui é etiquetas de género pode causar ambiguidade, se a página atual é apenas uma forma formulário, o formulário não duplicar ou vários campos, sem configuração não tem nome do efeito
console.log (genderDiv.value); // você pode imprimir o valor de uma forma de sexo, o valor que recebem menos de outra forma, porque id está definido para repetição, cobrindo
3. As regras de validação dinâmicos:
<template>
<a-form: form = "forma">
<a-form- artigo
: Etiqueta col = "formItemLayout.labelCol"
: envoltório col = "formItemLayout.wrapperCol"
etiqueta = "Name"
>
<a- entrada
v -decorator = "[ 'username', ValidateRules.username]"
espaço reservado = "Por favor insira o seu nome"
/>
</ a-form-item>
<a-form- artigo
: etiqueta col = "formItemLayout.labelCol"
: envoltório col = "formItemLayout.wrapperCol"
etiqueta = "Nome de utilizador"
>
<a- entrada
v -decorator = "[ 'apelido', ValidateRules.nickname]"
espaço reservado = "Por favor insira o seu apelido de"
/>
</ a-form-item>
<a-form-artigo: label-col = "formTailLayout.labelCol": envoltório-col = "formTailLayout.wrapperCol">
<a-caixa: checked = "checkNick" @ mudança = "handleChange">
apelido é necessário
</ a-checkbox>
</ a-form-item>
<a-form-ponto : label-col = "formTailLayout.labelCol": envoltório-col = "formTailLayout.wrapperCol">
<type um botão = "primário" @ clique = "cheque">
Verifique
</ a-button>
</ a-form-item>
</ a-form>
</ template>
<script>
const formItemLayout= {
LabelCol: {intervalo: . 4 },
wrapperCol: {intervalo: . 8 },
};
const formTailLayout = {
labelCol: {intervalo: . 4 },
wrapperCol: {intervalo: . 8, compensar :. 4 },
};
Export padrão {
Dados () {
return {
checkNick: falso , // estado da caixa de ligação nos dois sentidos
formItemLayout, // forma de esquema de etiqueta e layout invólucro-col
formTailLayout,
forma: o presente . $ form.createForm (a este ), // criar um formulário
ValidateRules: { // processo de validação forma em que as regras de formulário apelido de validação, determinados pelo atributo this.checkNick
nome de usuário: {as regras: [{exigida: a verdade , mensagem: 'Por favor, o seu apelido INPUT' }]},
apelido: {as regras: [necessários {: a este .checkNick, Mensagem: 'Por favor, seu apelido INPUT' }]}}
};
},
Métodos: {
check () {
as este .form.validateFields (ERR => {
IF (! ERR) {
console.info ( 'Sucesso' );
}
});
},
handleChange (E) { // Mudança caixa método de ligação, o estado de entrada da caixa de verificação é verdadeira ou falsa
a esta .checkNick = e.target.checked; // modificar valor checkNick, validação correspondente governa a mudança apelido
a este . $ nextTick (() => { // nota a ser colocado função nextTick para
os este .form.validateFields ([ 'Alcunha'], {vigor: a true }); // iniciar as regras de validação, força forçado correção teste
});
},
},
};
</ script>
4. Para ser continuado direita