JQuery UI – Regex – Regular Expression – Linux

Publicado: 31 de janeiro de 2015 em JavaScript, JQuery

Em ciência da computação teórica e teoria da linguagem formal, uma expressão regular abreviada de Regex ou Regexp e, por vezes chamado de uma expressão racional é uma sequência de caracteres que forma um padrão de pesquisa, principalmente para uso na correspondência de padrões com Strings, ou sequência correspondente, ou seja, como operações de localizar e substituir. O conceito surgiu na década de 1950, quando o matemático americano Stephen Kleene formalizava a descrição de uma linguagem regular, e entrou em uso comum com os utilitários Unix de processamento de texto.

Cada caractere em uma expressão regular ou é entendido como um MetaCharacter com seu significado especial, ou um caractere regular com o seu significado literal. Em conjunto, eles podem ser usados para identificar material textual de um determinado padrão, ou processar um número de instâncias do mesmo que podem variar de uma igualdade exata para uma semelhança muito geral do padrão.

O Regex pode ser usado para analisar rapidamente grandes quantidades de texto para encontrar padrões de caracteres específicos; para extrair, editar, substituir ou excluir substrings de texto, também é comum serem utilizadas para validar campos.

Regular Expression

Existe muito material sobre expressões regulares, inclusive a API do Javascript contempla métodos para combinar sequências de caracteres contra padrões especificados por expressões regulares

Regex: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions

Por outro lado existem alguns sites que proporcionam ótimos materiais sobre Regex e permitem que você crie e teste sua própria expressão regular antes de a utilizar.

RegExr: http://regexr.com/

Expressão regular que contempla caracteres maiúsculos e minúsculos: Pattern [a-zA-Z]+

Regex - [a-zA-Z]+

Regex – [a-zA-Z]+

Expressão regular que contempla números inteiros e flutuantes: Pattern (?:\d*\.)?\d+

Regex - (?:\d*\.)?\d+

Regex – (?:\d*\.)?\d+

Usando Expressões Regulares

1 – Crie uma página web, utilize os scripts JQuery adequados no qual você pode conferir no código abaixo:

JQuery UI - Validação - Regex

JQuery UI – Validação – Regex

Exemplo:

Neste exemplo utilizamos expressões regulares para validar o conteúdo dos campos de uma aplicação JQuery. Na aplicação se um campo de texto conter caracteres que não correspondem a expressão serão automaticamente invalidados.

JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenvolvimento Aberto</title>

<style type="text/css">
body {
	font: 62.5% "Trebuchet MS", sans-serif;
	margin: 50px;
}

#cadastro label {
	width: 250px;
}

#cadastro label.error, #cadastro input.submit {
	color: darkorange;
	margin-left: 253px;
}
</style>
<!--
         Está é uma instalação do JQuery, você apenas precisa apontar
         para o respectivo script da versão que você deseja utilizar

         jquery.js     = JQuery
         jquery-ui.js  = JQuery UI
         jquery-ui.css = JQuery Theme
    -->
<link href="./jquery-ui-1.11.2.custom/jquery-ui.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/external/jquery/jquery.js">

</script>
<script type="text/javascript"
	src="./jquery-ui-1.11.2.custom/jquery-ui.js">

</script>

<!-- JQuery Validator -->

<script type="text/javascript"
	src="./js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>

<!-- Script JQuery - JQuery UI -->

<script type="text/javascript">
	// Declara UI e funções JQuery

	$(document).ready(function() {

		// Método de validação  - Adiciona método JQuery Validation
		$.validator.addMethod("regex", function(value, element, regexp) {
			var re = new RegExp(regexp);
			return this.optional(element) || re.test(value);
		}, "Menssagem substituída pela mensagem do Plug-in JQuery Validation.");

		// Cria regras de validação e customiza mensagens

		$("#cadastro").validate({
			rules : {
				nome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				sobrenome : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				cargo : {
					required : true,
					regex : /[a-zA-Z]+/
				},
				salario : {
					required : true,
					regex : /(?:\d*\.)?\d+/
				},

			},

			messages : {
				nome : {
					required : "O campo nome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				sobrenome : {
					required : "O campo sobrenome é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				cargo : {
					required : "O campo cargo é obrigatório.",
					regex : "Campo suporta somente letras."
				},
				salario : {
					required : "O campo salário é obrigatório.",
					regex : "Campo suporta somente decimais."
				},
			},
		});

		$("#accordion").accordion({
			heightStyle : "content"
		}).accordion("option", "icons", null)

		$("#abrir").button()

	});
</script>
</head>
<body>
	<h1>Desenvolvimento Aberto - JQuery - UI</h1>

	<h2>Form Validator - Validação</h2>
	<div id="accordion">
		<h3>Cadastro</h3>
		<div>
			<form id="cadastro" method="get" action="">
				<table>
					<tr>
						<td><label for="nome">Nome:</label></td>
						<td><input id="nome" name="nome" size="27" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="sobrenome">Sobrenome:</label></td>
						<td><input id="sobrenome" name="sobrenome" size="35" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="cargo">Cargo:</label></td>
						<td><input id="cargo" name="cargo" size="28" required>
							<br></td>
					</tr>
					<tr>
						<td><label for="salario">Salario:</label></td>
						<td><input id="salario" name="salario" size="18" required>
							<br></td>
					</tr>
				</table>
				<br>
				<button id="abrir" type="submit">Enviar Dados</button>
			</form>
		</div>
	</div>

</body>
</html>

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s